mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
epic(website): refactor website (#3426)
* feat(website): init viteperss (#3162) * init vitepress * Finish homepage * relayout page * partial finish * update * update use lang * remove font weight; change font size * docs: optimize docs folder structure * reorganize project * fix ssr issue * fix build issues Co-authored-by: Kevin <sxzz@sxzz.moe> Co-authored-by: zouhang <zouhang@didiglobal.com> * feat(website) integrate with crowdin (#3218) - Introduce Crowdin CLI - Add script for fetching Crowdin token from env - Add script for local development * fix formatting * update codeblocks (#3249) * feat(docs): update website preview script - Update azure preview build script - Eliminate dead links * bootstrap docs * fix homepage layout issue * fix formating * Finish ToC and codepen integration * reorganized files and fix issue that causes demo unavailable after build * feat(docs): migration documentations (#3283) * feat(docs): migration documentations - Move documentations to docs/ * remove unused files * docs: [popconfirm] migrate document (#3285) * feat(docs): migrate documentation from space.md to upload.md (#3292) - Upload documentations acorrodingly * docs: [date-picker] migrate document (#3289) * docs: [date-picker] migrate document * fix: typo * docs: [slider] migrate document (#3287) * docs: migrate documents (#3290) * docs: migrate-datetime-picker * docs: migrate descriptions * docs: migrate dialog * docs: migrate divider * docs: migrate drawer * docs: migrate drapdown * docs: fix drapdown * docs: migrate empty * docs: migrate form * docs: add scoped for style * docs: simplify toRefs * chore: update doc (#3297) * chore: update doc * chore: update doc * chore: update doc * feat(docs): migrate documentations from infinite-scroll to page-header (#3303) - Update docs accordingly - Update CodePen icon to match style - Update component name to match others * docs: migrate documentions (#3293) migrate list: * image * popover * scrollbar * radio * rate * skeleton * select * select-v2 * reault * progress * pagination * chore: update doc (#3305) Co-authored-by: 0song <0song@gmail.com> * Fix broken pipeline * chore: update demo plugin * website perfection * fix hydration bug * docs: update guide (#3342) * WIP docs * docs: update docs * add dark mode * make dev fetch components from local instead of node_modules Co-authored-by: msidolphin <msidolphin@outlook.com> Co-authored-by: Aex <spryti@qq.com> Co-authored-by: 0song <82012629+0song@users.noreply.github.com> Co-authored-by: 0song <0song@gmail.com> Co-authored-by: zouhang <zouhang@didiglobal.com> Co-authored-by: 三咲智子 <sxzz@sxzz.moe> * fix(docs): fix codepen code example issue (#3380) * fix(docs): fix codepen code example issue - Add lang="ts" for all example files - Fix codepen import error * revert changes in resource.vue * feat(docs): complete crowdin integration (#3408) * Update mds for preparing the integration script * deprecate old website * update sponsors and even handler for resize * update build script for preview * fix preview-build error * fix preview-build error * fix preview-build error * fix preview-build error * fix preview-build error * update deploy script and some bugs * Fix existing issue * chore(project): add dev preview workflow * chore(project): rename dev to staging * update the size of toc * update staging-preview script * update preview scripts * enable website build for preview * fix build error * final commitment for update the details * remove azure pipeline * move docs ignores into docs and update date Co-authored-by: Kevin <sxzz@sxzz.moe> Co-authored-by: zouhang <zouhang@didiglobal.com> Co-authored-by: msidolphin <msidolphin@outlook.com> Co-authored-by: Aex <spryti@qq.com> Co-authored-by: 0song <82012629+0song@users.noreply.github.com> Co-authored-by: 0song <0song@gmail.com>
This commit is contained in:
jeremywu
44
docs/examples/select/allow-create.vue
Normal file
44
docs/examples/select/allow-create.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
placeholder="Choose tags for your article"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
options: ref([
|
||||
{
|
||||
value: 'HTML',
|
||||
label: 'HTML',
|
||||
},
|
||||
{
|
||||
value: 'CSS',
|
||||
label: 'CSS',
|
||||
},
|
||||
{
|
||||
value: 'JavaScript',
|
||||
label: 'JavaScript',
|
||||
},
|
||||
]),
|
||||
value: ref([]),
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
45
docs/examples/select/basic-usage.vue
Normal file
45
docs/examples/select/basic-usage.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<el-select v-model="value" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
options: ref([
|
||||
{
|
||||
value: 'Option1',
|
||||
label: 'Option1',
|
||||
},
|
||||
{
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
},
|
||||
{
|
||||
value: 'Option3',
|
||||
label: 'Option3',
|
||||
},
|
||||
{
|
||||
value: 'Option4',
|
||||
label: 'Option4',
|
||||
},
|
||||
{
|
||||
value: 'Option5',
|
||||
label: 'Option5',
|
||||
},
|
||||
]),
|
||||
value: ref(''),
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
45
docs/examples/select/clearable.vue
Normal file
45
docs/examples/select/clearable.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<el-select v-model="value" clearable placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
options: ref([
|
||||
{
|
||||
value: 'Option1',
|
||||
label: 'Option1',
|
||||
},
|
||||
{
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
},
|
||||
{
|
||||
value: 'Option3',
|
||||
label: 'Option3',
|
||||
},
|
||||
{
|
||||
value: 'Option4',
|
||||
label: 'Option4',
|
||||
},
|
||||
{
|
||||
value: 'Option5',
|
||||
label: 'Option5',
|
||||
},
|
||||
]),
|
||||
value: ref(''),
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
58
docs/examples/select/custom-template.vue
Normal file
58
docs/examples/select/custom-template.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<el-select v-model="value" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in cities"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<span style="float: left">{{ item.label }}</span>
|
||||
<span
|
||||
style="
|
||||
float: right;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
"
|
||||
>{{ item.value }}</span
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
cities: ref([
|
||||
{
|
||||
value: 'Beijing',
|
||||
label: 'Beijing',
|
||||
},
|
||||
{
|
||||
value: 'Shanghai',
|
||||
label: 'Shanghai',
|
||||
},
|
||||
{
|
||||
value: 'Nanjing',
|
||||
label: 'Nanjing',
|
||||
},
|
||||
{
|
||||
value: 'Chengdu',
|
||||
label: 'Chengdu',
|
||||
},
|
||||
{
|
||||
value: 'Shenzhen',
|
||||
label: 'Shenzhen',
|
||||
},
|
||||
{
|
||||
value: 'Guangzhou',
|
||||
label: 'Guangzhou',
|
||||
},
|
||||
]),
|
||||
value: ref(''),
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
47
docs/examples/select/disabled-option.vue
Normal file
47
docs/examples/select/disabled-option.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<el-select v-model="value" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
options: ref([
|
||||
{
|
||||
value: 'Option1',
|
||||
label: 'Option1',
|
||||
},
|
||||
{
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
value: 'Option3',
|
||||
label: 'Option3',
|
||||
},
|
||||
{
|
||||
value: 'Option4',
|
||||
label: 'Option4',
|
||||
},
|
||||
{
|
||||
value: 'Option5',
|
||||
label: 'Option5',
|
||||
},
|
||||
]),
|
||||
value: ref(''),
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
45
docs/examples/select/disabled.vue
Normal file
45
docs/examples/select/disabled.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<el-select v-model="value" disabled placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
options: ref([
|
||||
{
|
||||
value: 'Option1',
|
||||
label: 'Option1',
|
||||
},
|
||||
{
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
},
|
||||
{
|
||||
value: 'Option3',
|
||||
label: 'Option3',
|
||||
},
|
||||
{
|
||||
value: 'Option4',
|
||||
label: 'Option4',
|
||||
},
|
||||
{
|
||||
value: 'Option5',
|
||||
label: 'Option5',
|
||||
},
|
||||
]),
|
||||
value: ref(''),
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
45
docs/examples/select/filterable.vue
Normal file
45
docs/examples/select/filterable.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<el-select v-model="value" filterable placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
options: ref([
|
||||
{
|
||||
value: 'Option1',
|
||||
label: 'Option1',
|
||||
},
|
||||
{
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
},
|
||||
{
|
||||
value: 'Option3',
|
||||
label: 'Option3',
|
||||
},
|
||||
{
|
||||
value: 'Option4',
|
||||
label: 'Option4',
|
||||
},
|
||||
{
|
||||
value: 'Option5',
|
||||
label: 'Option5',
|
||||
},
|
||||
]),
|
||||
value: ref(''),
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
65
docs/examples/select/grouping.vue
Normal file
65
docs/examples/select/grouping.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<el-select v-model="value" placeholder="Select">
|
||||
<el-option-group
|
||||
v-for="group in options"
|
||||
:key="group.label"
|
||||
:label="group.label"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in group.options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
options: ref([
|
||||
{
|
||||
label: 'Popular cities',
|
||||
options: [
|
||||
{
|
||||
value: 'Shanghai',
|
||||
label: 'Shanghai',
|
||||
},
|
||||
{
|
||||
value: 'Beijing',
|
||||
label: 'Beijing',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'City name',
|
||||
options: [
|
||||
{
|
||||
value: 'Chengdu',
|
||||
label: 'Chengdu',
|
||||
},
|
||||
{
|
||||
value: 'Shenzhen',
|
||||
label: 'Shenzhen',
|
||||
},
|
||||
{
|
||||
value: 'Guangzhou',
|
||||
label: 'Guangzhou',
|
||||
},
|
||||
{
|
||||
value: 'Dalian',
|
||||
label: 'Dalian',
|
||||
},
|
||||
],
|
||||
},
|
||||
]),
|
||||
value: ref(''),
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
62
docs/examples/select/multiple.vue
Normal file
62
docs/examples/select/multiple.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<el-select v-model="value1" multiple placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select
|
||||
v-model="value2"
|
||||
multiple
|
||||
collapse-tags
|
||||
style="margin-left: 20px"
|
||||
placeholder="Select"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
options: ref([
|
||||
{
|
||||
value: 'Option1',
|
||||
label: 'Option1',
|
||||
},
|
||||
{
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
},
|
||||
{
|
||||
value: 'Option3',
|
||||
label: 'Option3',
|
||||
},
|
||||
{
|
||||
value: 'Option4',
|
||||
label: 'Option4',
|
||||
},
|
||||
{
|
||||
value: 'Option5',
|
||||
label: 'Option5',
|
||||
},
|
||||
]),
|
||||
value1: ref([]),
|
||||
value2: ref([]),
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
113
docs/examples/select/remote-search.vue
Normal file
113
docs/examples/select/remote-search.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="Please enter a keyword"
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent, onMounted } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const list = ref([])
|
||||
const options = ref([])
|
||||
const value = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
const states = [
|
||||
'Alabama',
|
||||
'Alaska',
|
||||
'Arizona',
|
||||
'Arkansas',
|
||||
'California',
|
||||
'Colorado',
|
||||
'Connecticut',
|
||||
'Delaware',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Hawaii',
|
||||
'Idaho',
|
||||
'Illinois',
|
||||
'Indiana',
|
||||
'Iowa',
|
||||
'Kansas',
|
||||
'Kentucky',
|
||||
'Louisiana',
|
||||
'Maine',
|
||||
'Maryland',
|
||||
'Massachusetts',
|
||||
'Michigan',
|
||||
'Minnesota',
|
||||
'Mississippi',
|
||||
'Missouri',
|
||||
'Montana',
|
||||
'Nebraska',
|
||||
'Nevada',
|
||||
'New Hampshire',
|
||||
'New Jersey',
|
||||
'New Mexico',
|
||||
'New York',
|
||||
'North Carolina',
|
||||
'North Dakota',
|
||||
'Ohio',
|
||||
'Oklahoma',
|
||||
'Oregon',
|
||||
'Pennsylvania',
|
||||
'Rhode Island',
|
||||
'South Carolina',
|
||||
'South Dakota',
|
||||
'Tennessee',
|
||||
'Texas',
|
||||
'Utah',
|
||||
'Vermont',
|
||||
'Virginia',
|
||||
'Washington',
|
||||
'West Virginia',
|
||||
'Wisconsin',
|
||||
'Wyoming',
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
list.value = states.map((item) => {
|
||||
return { value: `value:${item}`, label: `label:${item}` }
|
||||
})
|
||||
})
|
||||
|
||||
const remoteMethod = (query) => {
|
||||
if (query !== '') {
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
options.value = list.value.filter((item) => {
|
||||
return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
|
||||
})
|
||||
}, 200)
|
||||
} else {
|
||||
options.value = []
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
options,
|
||||
value,
|
||||
loading,
|
||||
remoteMethod,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user