test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-02 03:08:21 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs(examples): standardize unified code format and fix some type (#16370)

Browse Source 
* docs: standardize unified example code format and fix some example type

* docs:  update some example type

* Update docs/examples/descriptions/sizes.vue

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* docs: update example-page-header

* docs: update example-page-header

---------

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
This commit is contained in:
sea 2024-04-15 16:29:21 +08:00 committed by GitHub
parent e4306b2eb1
commit ade87f6729
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
76 changed files with 256 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/examples/avatar/fit.vue
View File

@ -8,9 +8,16 @@
</template>
<script lang="ts" setup>
import { reactive, toRefs } from 'vue'
import type { ObjectFitProperty } from 'csstype'
const state = reactive({
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
fits: [
'fill',
'contain',
'cover',
'none',
'scale-down',
] as ObjectFitProperty[],
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
})

6
docs/examples/breadcrumb/basic.vue
View File

@ -1,9 +1,9 @@
<template>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item
><a href="/">promotion management</a></el-breadcrumb-item
>
<el-breadcrumb-item>
<a href="/">promotion management</a>
</el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>

6
docs/examples/button/custom.vue
View File

@ -8,8 +8,8 @@ import { isDark } from '~/composables/dark'
<el-button color="#626aef" :dark="isDark" plain>Plain</el-button>
<el-button color="#626aef" :dark="isDark" disabled>Disabled</el-button>
<el-button color="#626aef" :dark="isDark" disabled plain
>Disabled Plain</el-button
>
<el-button color="#626aef" :dark="isDark" disabled plain>
Disabled Plain
</el-button>
</div>
</template>

6
docs/examples/button/link.vue
View File

@ -6,8 +6,9 @@
:key="button.text"
:type="button.type"
link
>{{ button.text }}</el-button
>
{{ button.text }}
</el-button>
</div>
<p>Disabled link button</p>
@ -18,8 +19,9 @@
:type="button.type"
link
disabled
>{{ button.text }}</el-button
>
{{ button.text }}
</el-button>
</div>
</template>

9
docs/examples/button/text.vue
View File

@ -6,8 +6,9 @@
:key="button.text"
:type="button.type"
text
>{{ button.text }}</el-button
>
{{ button.text }}
</el-button>
</div>
<p>Background color always on</p>
@ -18,8 +19,9 @@
:type="button.type"
text
bg
>{{ button.text }}</el-button
>
{{ button.text }}
</el-button>
</div>
<p>Disabled text button</p>
@ -30,8 +32,9 @@
:type="button.type"
text
disabled
>{{ button.text }}</el-button
>
{{ button.text }}
</el-button>
</div>
</template>

6
docs/examples/carousel/basic.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="block text-center">
<span class="demonstration"
>Switch when indicator is hovered (default)</span
>
<span class="demonstration">
Switch when indicator is hovered (default)
</span>
<el-carousel height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small justify-center" text="2xl">{{ item }}</h3>

2
docs/examples/cascader/multiple-selection.vue
View File

@ -24,7 +24,7 @@
:props="props"
collapse-tags
collapse-tags-tooltip
max-collapse-tags="3"
:max-collapse-tags="3"
clearable
/>
</div>

15
docs/examples/checkbox/button-style.vue
View File

@ -8,9 +8,9 @@
</div>
<div class="demo-button-style">
<el-checkbox-group v-model="checkboxGroup2">
<el-checkbox-button v-for="city in cities" :key="city" :value="city">{{
city
}}</el-checkbox-button>
<el-checkbox-button v-for="city in cities" :key="city" :value="city">
{{ city }}
</el-checkbox-button>
</el-checkbox-group>
</div>
<div class="demo-button-style">
@ -20,15 +20,16 @@
:key="city"
:value="city"
:disabled="city === 'Beijing'"
>{{ city }}</el-checkbox-button
>
{{ city }}
</el-checkbox-button>
</el-checkbox-group>
</div>
<div class="demo-button-style">
<el-checkbox-group v-model="checkboxGroup4" size="small" disabled>
<el-checkbox-button v-for="city in cities" :key="city" :value="city">{{
city
}}</el-checkbox-button>
<el-checkbox-button v-for="city in cities" :key="city" :value="city">
{{ city }}
</el-checkbox-button>
</el-checkbox-group>
</div>
</template>

13
docs/examples/checkbox/intermediate.vue
View File

@ -3,19 +3,16 @@
v-model="checkAll"
:indeterminate="isIndeterminate"
@change="handleCheckAllChange"
>Check all</el-checkbox
>
Check all
</el-checkbox>
<el-checkbox-group
v-model="checkedCities"
@change="handleCheckedCitiesChange"
>
<el-checkbox
v-for="city in cities"
:key="city"
:label="city"
:value="city"
>{{ city }}</el-checkbox
>
<el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
{{ city }}
</el-checkbox>
</el-checkbox-group>
</template>

10
docs/examples/checkbox/limitation.vue
View File

@ -1,12 +1,8 @@
<template>
<el-checkbox-group v-model="checkedCities" :min="1" :max="2">
<el-checkbox
v-for="city in cities"
:key="city"
:label="city"
:value="city"
>{{ city }}</el-checkbox
>
<el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
{{ city }}
</el-checkbox>
</el-checkbox-group>
</template>

6
docs/examples/config-provider/button.vue
View File

@ -1,9 +1,9 @@
<template>
<div>
<div m="b-2">
<el-checkbox v-model="config.autoInsertSpace"
>autoInsertSpace</el-checkbox
>
<el-checkbox v-model="config.autoInsertSpace">
autoInsertSpace
</el-checkbox>
</div>
<el-config-provider :button="config">

6
docs/examples/container/example.vue
View File

@ -62,9 +62,9 @@
<el-header style="text-align: right; font-size: 12px">
<div class="toolbar">
<el-dropdown>
<el-icon style="margin-right: 8px; margin-top: 1px"
><setting
/></el-icon>
<el-icon style="margin-right: 8px; margin-top: 1px">
<setting />
</el-icon>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>View</el-dropdown-item>

6
docs/examples/datetime-picker/default-time.vue
View File

@ -10,9 +10,9 @@
/>
</div>
<div class="block">
<span class="demonstration"
>Start date time 12:00:00, end date time 08:00:00</span
>
<span class="demonstration">
Start date time 12:00:00, end date time 08:00:00
</span>
<el-date-picker
v-model="value2"
type="datetimerange"

7
docs/examples/descriptions/basic-usage.vue
View File

@ -6,9 +6,8 @@
<el-descriptions-item label="Remarks">
<el-tag size="small">School</el-tag>
</el-descriptions-item>
<el-descriptions-item label="Address"
>No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
Province</el-descriptions-item
>
<el-descriptions-item label="Address">
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
</el-descriptions-item>
</el-descriptions>
</template>

22
docs/examples/descriptions/customized-style.vue
View File

@ -7,21 +7,21 @@
label-class-name="my-label"
class-name="my-content"
width="150px"
>kooriookami</el-descriptions-item
>
<el-descriptions-item label="Telephone" label-align="right" align="center"
>18100000000</el-descriptions-item
>
<el-descriptions-item label="Place" label-align="right" align="center"
>Suzhou</el-descriptions-item
>
kooriookami
</el-descriptions-item>
<el-descriptions-item label="Telephone" label-align="right" align="center">
18100000000
</el-descriptions-item>
<el-descriptions-item label="Place" label-align="right" align="center">
Suzhou
</el-descriptions-item>
<el-descriptions-item label="Remarks" label-align="right" align="center">
<el-tag size="small">School</el-tag>
</el-descriptions-item>
<el-descriptions-item label="Address" label-align="right" align="center"
>No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
Province</el-descriptions-item
>
<el-descriptions-item label="Address" label-align="right" align="center">
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
</el-descriptions-item>
</el-descriptions>
</template>
<style scoped>

8
docs/examples/descriptions/sizes.vue
View File

@ -88,8 +88,8 @@
<el-descriptions-item label="Remarks">
<el-tag size="small">School</el-tag>
</el-descriptions-item>
<el-descriptions-item label="Address"
>No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
<el-descriptions-item label="Address">
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
</el-descriptions-item>
</el-descriptions>
</template>
@ -103,8 +103,10 @@ import {
Tickets,
User,
} from '@element-plus/icons-vue'
import type { ComponentSize } from 'element-plus'
const size = ref<ComponentSize>('default')
const size = ref('default')
const iconStyle = computed(() => {
const marginMap = {
large: '8px',

12
docs/examples/descriptions/vertical-list.vue
View File

@ -18,8 +18,8 @@
<el-descriptions-item label="Remarks">
<el-tag size="small">School</el-tag>
</el-descriptions-item>
<el-descriptions-item label="Address"
>No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
<el-descriptions-item label="Address">
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
</el-descriptions-item>
</el-descriptions>
@ -36,16 +36,18 @@
<el-descriptions-item label="Remarks">
<el-tag size="small">School</el-tag>
</el-descriptions-item>
<el-descriptions-item label="Address"
>No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
<el-descriptions-item label="Address">
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
</el-descriptions-item>
</el-descriptions>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import type { ComponentSize } from 'element-plus'
const size = ref<ComponentSize>('default')
const size = ref('default')
const blockMargin = computed(() => {
const marginMap = {
large: '32px',

16
docs/examples/divider/basic-usage.vue
View File

@ -1,13 +1,13 @@
<template>
<div>
<span
>I sit at my window this morning where the world like a passer-by stops
for a moment, nods to me and goes.</span
>
<span>
I sit at my window this morning where the world like a passer-by stops for
a moment, nods to me and goes.
</span>
<el-divider />
<span
>There little thoughts are the rustle of leaves; they have their whisper
of joy in my mind.</span
>
<span>
There little thoughts are the rustle of leaves; they have their whisper of
joy in my mind.
</span>
</div>
</template>

8
docs/examples/divider/custom-content.vue
View File

@ -2,10 +2,10 @@
<div>
<span>What you are you do not see, what you see is your shadow. </span>
<el-divider content-position="left">Rabindranath Tagore</el-divider>
<span
>My wishes are fools, they shout across thy song, my Master. Let me but
listen.</span
>
<span>
My wishes are fools, they shout across thy song, my Master. Let me but
listen.
</span>
<el-divider>
<el-icon><star-filled /></el-icon>
</el-divider>

15
docs/examples/drawer/basic-usage.vue
View File

@ -27,12 +27,12 @@
</template>
<template #default>
<div>
<el-radio v-model="radio1" value="Option 1" size="large"
>Option 1</el-radio
>
<el-radio v-model="radio1" value="Option 2" size="large"
>Option 2</el-radio
>
<el-radio v-model="radio1" value="Option 1" size="large">
Option 1
</el-radio>
<el-radio v-model="radio1" value="Option 2" size="large">
Option 2
</el-radio>
</div>
</template>
<template #footer>
@ -47,10 +47,11 @@
<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import type { DrawerProps } from 'element-plus'
const drawer = ref(false)
const drawer2 = ref(false)
const direction = ref('rtl')
const direction = ref<DrawerProps['direction']>('rtl')
const radio1 = ref('Option 1')
const handleClose = (done: () => void) => {
ElMessageBox.confirm('Are you sure you want to close this?')

14
docs/examples/drawer/customization-content.vue
View File

@ -19,7 +19,6 @@
</el-drawer>
<el-drawer
ref="drawerRef"
v-model="dialog"
title="I have a nested form inside!"
:before-close="handleClose"
@ -43,9 +42,9 @@
</el-form>
<div class="demo-drawer__footer">
<el-button @click="cancelForm">Cancel</el-button>
<el-button type="primary" :loading="loading" @click="onClick">{{
loading ? 'Submitting ...' : 'Submit'
}}</el-button>
<el-button type="primary" :loading="loading" @click="onClick">
{{ loading ? 'Submitting ...' : 'Submit' }}
</el-button>
</div>
</div>
</el-drawer>
@ -96,9 +95,12 @@ const gridData = [
},
]
const drawerRef = ref<InstanceType<typeof ElDrawer>>()
const onClick = () => {
drawerRef.value!.close()
loading.value = true
setTimeout(() => {
loading.value = false
dialog.value = false
}, 400)
}
const handleClose = (done) => {

6
docs/examples/form/custom-validation.vue
View File

@ -22,9 +22,9 @@
<el-input v-model.number="ruleForm.age" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)"
>Submit</el-button
>
<el-button type="primary" @click="submitForm(ruleFormRef)">
Submit
</el-button>
<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
</el-form-item>
</el-form>

6
docs/examples/form/form-items.vue
View File

@ -36,9 +36,9 @@
}"
>
<el-input v-model="domain.value" />
<el-button class="mt-2" @click.prevent="removeDomain(domain)"
>Delete</el-button
>
<el-button class="mt-2" @click.prevent="removeDomain(domain)">
Delete
</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(formRef)">Submit</el-button>

4
docs/examples/form/validation.vue
View File

@ -93,7 +93,7 @@
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
interface RuleForm {
name: string
@ -108,7 +108,7 @@ interface RuleForm {
desc: string
}
const formSize = ref('default')
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
name: 'Hello',

10
docs/examples/image/basic-usage.vue
View File

@ -8,7 +8,15 @@
</template>
<script lang="ts" setup>
const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
import type { ImageProps } from 'element-plus'
const fits = [
'fill',
'contain',
'cover',
'none',
'scale-down',
] as ImageProps['fit'][]
const url =
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
</script>

24
docs/examples/layout/column-offset.vue
View File

@ -1,22 +1,22 @@
<template>
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
<el-col :span="6" :offset="6"
><div class="grid-content ep-bg-purple"
/></el-col>
<el-col :span="6" :offset="6">
<div class="grid-content ep-bg-purple" />
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6" :offset="6"
><div class="grid-content ep-bg-purple"
/></el-col>
<el-col :span="6" :offset="6"
><div class="grid-content ep-bg-purple"
/></el-col>
<el-col :span="6" :offset="6">
<div class="grid-content ep-bg-purple" />
</el-col>
<el-col :span="6" :offset="6">
<div class="grid-content ep-bg-purple" />
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12" :offset="6"
><div class="grid-content ep-bg-purple"
/></el-col>
<el-col :span="12" :offset="6">
<div class="grid-content ep-bg-purple" />
</el-col>
</el-row>
</template>

1
docs/examples/message-box/customization.vue
View File

@ -5,6 +5,7 @@
<script lang="ts" setup>
import { h } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const open = () => {
ElMessageBox({
title: 'Message',

1
docs/examples/message-box/distinguishable-close-cancel.vue
View File

@ -5,6 +5,7 @@
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
const open = () => {
ElMessageBox.confirm(
'You have unsaved changes, save and proceed?',

22
docs/examples/page-header/complete.vue
View File

@ -6,9 +6,9 @@
<el-breadcrumb-item :to="{ path: './page-header.html' }">
homepage
</el-breadcrumb-item>
<el-breadcrumb-item
><a href="./page-header.html">route 1</a></el-breadcrumb-item
>
<el-breadcrumb-item>
<a href="./page-header.html">route 1</a>
</el-breadcrumb-item>
<el-breadcrumb-item>route 2</el-breadcrumb-item>
</el-breadcrumb>
</template>
@ -37,18 +37,18 @@
</template>
<el-descriptions :column="3" size="small" class="mt-4">
<el-descriptions-item label="Username"
>kooriookami</el-descriptions-item
>
<el-descriptions-item label="Telephone"
>18100000000</el-descriptions-item
>
<el-descriptions-item label="Username">
kooriookami
</el-descriptions-item>
<el-descriptions-item label="Telephone">
18100000000
</el-descriptions-item>
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
<el-descriptions-item label="Remarks">
<el-tag size="small">School</el-tag>
</el-descriptions-item>
<el-descriptions-item label="Address"
>No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
<el-descriptions-item label="Address">
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
</el-descriptions-item>
</el-descriptions>
<p class="mt-4 text-sm">

6
docs/examples/popover/basic-usage.vue
View File

@ -56,9 +56,9 @@
content="this is content, this is content, this is content"
>
<template #reference>
<el-button class="m-2" @click="visible = !visible"
>Manual to activate</el-button
>
<el-button class="m-2" @click="visible = !visible">
Manual to activate
</el-button>
</template>
</el-popover>
</template>

6
docs/examples/popover/directive-usage.vue
View File

@ -1,7 +1,7 @@
<template>
<el-button v-popover="popoverRef" v-click-outside="onClickOutside"
>Click me</el-button
>
<el-button v-popover="popoverRef" v-click-outside="onClickOutside">
Click me
</el-button>
<el-popover
ref="popoverRef"

6
docs/examples/popover/nested-operation.vue
View File

@ -3,9 +3,9 @@
<p>Are you sure to delete this?</p>
<div style="text-align: right; margin: 0">
<el-button size="small" text @click="visible = false">cancel</el-button>
<el-button size="small" type="primary" @click="visible = false"
>confirm</el-button
>
<el-button size="small" type="primary" @click="visible = false">
confirm
</el-button>
</div>
<template #reference>
<el-button @click="visible = true">Delete</el-button>

7
docs/examples/popover/virtual-triggering.vue
View File

@ -1,7 +1,7 @@
<template>
<el-button ref="buttonRef" v-click-outside="onClickOutside"
>Click me</el-button
>
<el-button ref="buttonRef" v-click-outside="onClickOutside">
Click me
</el-button>
<el-popover
ref="popoverRef"
@ -17,6 +17,7 @@
<script setup lang="ts">
import { ref, unref } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'
const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {

1
docs/examples/progress/circular-progress-bar.vue
View File

@ -7,6 +7,7 @@
<el-progress type="circle" :percentage="50" status="exception" />
</div>
</template>
<style scoped>
.demo-progress .el-progress--circle {
margin-right: 15px;

1
docs/examples/progress/custom-color.vue
View File

@ -52,6 +52,7 @@ const decrease = () => {
}
}
</script>
<style scoped>
.demo-progress .el-progress--line {
margin-bottom: 15px;

1
docs/examples/progress/dashboard-progress-bar.vue
View File

@ -44,6 +44,7 @@ onMounted(() => {
}, 500)
})
</script>
<style scoped>
.demo-progress .el-progress--line {
margin-bottom: 15px;

1
docs/examples/progress/indeterminate-progress.vue
View File

@ -21,6 +21,7 @@
<script lang="ts" setup>
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>
<style scoped>
.demo-progress .el-progress--line {
margin-bottom: 15px;

6
docs/examples/radio/disabled.vue
View File

@ -1,8 +1,8 @@
<template>
<el-radio v-model="radio" disabled value="disabled">Option A</el-radio>
<el-radio v-model="radio" disabled value="selected and disabled"
>Option B</el-radio
>
<el-radio v-model="radio" disabled value="selected and disabled">
Option B
</el-radio>
</template>
<script lang="ts" setup>

4
docs/examples/rate/basic-usage.vue
View File

@ -12,8 +12,8 @@
<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref(null)
const value2 = ref(null)
const value1 = ref(0)
const value2 = ref(0)
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900']) // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
</script>

2
docs/examples/rate/sizes.vue
View File

@ -9,5 +9,5 @@
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref(null)
const value = ref(0)
</script>

4
docs/examples/select-v2/custom-footer.vue
View File

@ -30,11 +30,11 @@
<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import { ElSelectV2 } from 'element-plus'
import type { CheckboxValueType } from 'element-plus'
const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
const select = ref(null)
const select = ref<InstanceType<typeof ElSelectV2>>()
const isAdding = ref(false)
const value = ref<CheckboxValueType[]>([])
const optionName = ref('')

4
docs/examples/select-v2/custom-tag.vue
View File

@ -13,7 +13,7 @@
</div>
</template>
<template #tag>
<el-tag v-for="color in value" :key="color.value" :color="color" />
<el-tag v-for="color in value" :key="color" :color="color" />
</template>
</el-select-v2>
</template>
@ -21,7 +21,7 @@
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref([])
const value = ref<string[]>([])
const colors = [
{
value: '#E63415',

4
docs/examples/select/custom-tag.vue
View File

@ -12,7 +12,7 @@
</div>
</el-option>
<template #tag>
<el-tag v-for="color in value" :key="color.value" :color="color" />
<el-tag v-for="color in value" :key="color" :color="color" />
</template>
</el-select>
</template>
@ -20,7 +20,7 @@
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref([])
const value = ref<string[]>([])
const colors = [
{
value: '#E63415',

3
docs/examples/select/custom-template.vue
View File

@ -13,8 +13,9 @@
color: var(--el-text-color-secondary);
font-size: 13px;
"
>{{ item.value }}</span
>
{{ item.value }}
</span>
</el-option>
</el-select>
</template>

1
docs/examples/slider/placement.vue
View File

@ -21,6 +21,7 @@ const value2 = ref(0)
const value3 = ref(0)
const value4 = ref(0)
</script>
<style scoped>
.slider-demo-block {
max-width: 600px;

1
docs/examples/slider/range-selection.vue
View File

@ -9,6 +9,7 @@ import { ref } from 'vue'
const value = ref([4, 8])
</script>
<style scoped>
.slider-demo-block {
max-width: 600px;

1
docs/examples/slider/show-marks.vue
View File

@ -28,6 +28,7 @@ const marks = reactive<Marks>({
},
})
</script>
<style scoped>
.slider-demo-block {
max-width: 600px;

1
docs/examples/slider/slider-with-input-box.vue
View File

@ -9,6 +9,7 @@ import { ref } from 'vue'
const value = ref(0)
</script>
<style scoped>
.slider-demo-block {
max-width: 600px;

1
docs/examples/slider/vertical-mode.vue
View File

@ -9,6 +9,7 @@ import { ref } from 'vue'
const value = ref(0)
</script>
<style scoped>
.slider-demo-block {
max-width: 600px;

4
docs/examples/space/control-size.vue
View File

@ -24,5 +24,7 @@
<script lang="ts" setup>
import { ref } from 'vue'
const size = ref('default')
import type { ComponentSize } from 'element-plus'
const size = ref<ComponentSize>('default')
</script>

3
docs/examples/space/fill-ratio.vue
View File

@ -32,7 +32,8 @@
<script lang="ts" setup>
import { ref } from 'vue'
import type { SpaceInstance } from 'element-plus'
const direction = ref('horizontal')
const direction = ref<SpaceInstance['direction']>('horizontal')
const fillRatio = ref(30)
</script>

1
docs/examples/switch/custom-action-icon.vue
View File

@ -9,5 +9,6 @@
<script setup lang="ts">
import { ref } from 'vue'
import { Hide, View } from '@element-plus/icons-vue'
const value1 = ref(true)
</script>

1
docs/examples/switch/custom-action-slot.vue
View File

@ -10,5 +10,6 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value1 = ref(true)
</script>

1
docs/examples/switch/custom-icons.vue
View File

@ -14,6 +14,7 @@
<script setup lang="ts">
import { ref } from 'vue'
import { Check, Close } from '@element-plus/icons-vue'
const value1 = ref(true)
const value2 = ref(true)
</script>

9
docs/examples/table/custom-column.vue
View File

@ -23,15 +23,16 @@
</el-table-column>
<el-table-column label="Operations">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)"
>Edit</el-button
>
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">
Edit
</el-button>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>Delete</el-button
>
Delete
</el-button>
</template>
</el-table-column>
</el-table>

9
docs/examples/table/custom-header.vue
View File

@ -7,15 +7,16 @@
<el-input v-model="search" size="small" placeholder="Type to search" />
</template>
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)"
>Edit</el-button
>
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">
Edit
</el-button>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>Delete</el-button
>
Delete
</el-button>
</template>
</el-table-column>
</el-table>

6
docs/examples/table/fixed-column.vue
View File

@ -8,9 +8,9 @@
<el-table-column prop="zip" label="Zip" width="120" />
<el-table-column fixed="right" label="Operations" width="120">
<template #default>
<el-button link type="primary" size="small" @click="handleClick"
>Detail</el-button
>
<el-button link type="primary" size="small" @click="handleClick">
Detail
</el-button>
<el-button link type="primary" size="small">Edit</el-button>
</template>
</el-table-column>

6
docs/examples/table/fixed-header-with-fluid-header.vue
View File

@ -19,9 +19,9 @@
</template>
</el-table-column>
</el-table>
<el-button class="mt-4" style="width: 100%" @click="onAddItem"
>Add Item</el-button
>
<el-button class="mt-4" style="width: 100%" @click="onAddItem">
Add Item
</el-button>
</template>
<script lang="ts" setup>

6
docs/examples/table/multi-select.vue
View File

@ -13,9 +13,9 @@
<el-table-column property="address" label="Address" show-overflow-tooltip />
</el-table>
<div style="margin-top: 20px">
<el-button @click="toggleSelection([tableData[1], tableData[2]])"
>Toggle selection status of second and third rows</el-button
>
<el-button @click="toggleSelection([tableData[1], tableData[2]])">
Toggle selection status of second and third rows
</el-button>
<el-button @click="toggleSelection()">Clear selection</el-button>
</div>
</template>

3
docs/examples/table/table-layout.vue
View File

@ -12,8 +12,9 @@
<script lang="ts" setup>
import { ref } from 'vue'
import type { TableInstance } from 'element-plus'
const tableLayout = ref('fixed')
const tableLayout = ref<TableInstance['tableLayout']>('fixed')
const tableData = [
{

1
docs/examples/tabs/basic.vue
View File

@ -16,6 +16,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event)
}
</script>
<style>
.demo-tabs > .el-tabs__content {
padding: 32px;

2
docs/examples/tabs/card-style.vue
View File

@ -11,6 +11,7 @@
<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
</el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
@ -21,6 +22,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event)
}
</script>
<style>
.demo-tabs > .el-tabs__content {
padding: 32px;

1
docs/examples/tabs/custom-tab.vue
View File

@ -18,6 +18,7 @@
<script lang="ts" setup>
import { Calendar } from '@element-plus/icons-vue'
</script>
<style>
.demo-tabs > .el-tabs__content {
padding: 32px;

2
docs/examples/tabs/customized-add-button-icon.vue
View File

@ -20,6 +20,7 @@ addIcon
</el-tab-pane>
</el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Select } from '@element-plus/icons-vue'
@ -71,6 +72,7 @@ const handleTabsEdit = (
}
}
</script>
<style>
.demo-tabs > .el-tabs__content {
padding: 32px;

2
docs/examples/tabs/customized-trigger.vue
View File

@ -21,6 +21,7 @@
</el-tab-pane>
</el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
@ -66,6 +67,7 @@ const removeTab = (targetName: string) => {
editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
}
</script>
<style>
.demo-tabs > .el-tabs__content {
padding: 32px;

2
docs/examples/tabs/dynamic-tabs.vue
View File

@ -16,6 +16,7 @@
</el-tab-pane>
</el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabPaneName } from 'element-plus'
@ -66,6 +67,7 @@ const handleTabsEdit = (
}
}
</script>
<style>
.demo-tabs > .el-tabs__content {
padding: 32px;

5
docs/examples/tabs/tab-position.vue
View File

@ -13,11 +13,14 @@
<el-tab-pane label="Task">Task</el-tab-pane>
</el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsInstance } from 'element-plus'
const tabPosition = ref('left')
const tabPosition = ref<TabsInstance['tabPosition']>('left')
</script>
<style>
.demo-tabs > .el-tabs__content {
padding: 32px;

8
docs/examples/tag/removable.vue
View File

@ -8,8 +8,14 @@
<script lang="ts" setup>
import { ref } from 'vue'
import type { TagProps } from 'element-plus'
const tags = ref([
interface TagsItem {
name: string
type: TagProps['type']
}
const tags = ref<TagsItem[]>([
{ name: 'Tag 1', type: 'primary' },
{ name: 'Tag 2', type: 'success' },
{ name: 'Tag 3', type: 'info' },

7
docs/examples/tooltip-v2/a11y.vue
View File

@ -1,9 +1,9 @@
<template>
<el-tooltip-v2 :aria-label="title">
<template #trigger>
<el-button
><el-icon><Delete /></el-icon
></el-button>
<el-button>
<el-icon><Delete /></el-icon>
</el-button>
</template>
{{ content }}
</el-tooltip-v2>
@ -11,6 +11,7 @@
<script setup lang="ts">
import { Delete } from '@element-plus/icons-vue'
const content = 'Delete'
const title = 'Delete item'
</script>

6
docs/examples/tooltip-v2/arrow.vue
View File

@ -1,9 +1,9 @@
<template>
<el-tooltip-v2 aria-label="content" show-arrow always-on placement="top">
<template #trigger>
<el-button circle
><el-icon><Plus /></el-icon
></el-button>
<el-button circle>
<el-icon><Plus /></el-icon>
</el-button>
</template>
Basic tooltip
</el-tooltip-v2>

6
docs/examples/tooltip-v2/basic-usage.vue
View File

@ -1,9 +1,9 @@
<template>
<el-tooltip-v2 aria-label="content" placement="left">
<template #trigger>
<el-button circle
><el-icon><Plus /></el-icon
></el-button>
<el-button circle>
<el-icon><Plus /></el-icon>
</el-button>
</template>
Basic tooltip
</el-tooltip-v2>

6
docs/examples/tooltip-v2/full-transition.vue
View File

@ -1,9 +1,9 @@
<template>
<el-tooltip-v2 full-transition :transition-props="transitionProps">
<template #trigger>
<el-button circle
><el-icon><Plus /></el-icon
></el-button>
<el-button circle>
<el-icon><Plus /></el-icon>
</el-button>
</template>
<div>content</div>
</el-tooltip-v2>

6
docs/examples/tooltip-v2/transition.vue
View File

@ -2,9 +2,9 @@
<!-- eslint-disable vue/require-toggle-inside-transition -->
<el-tooltip-v2 aria-label="content" placement="top" content-class="scale-in">
<template #trigger>
<el-button circle
><el-icon><Plus /></el-icon
></el-button>
<el-button circle>
<el-icon><Plus /></el-icon>
</el-button>
</template>
<div>content</div>
</el-tooltip-v2>

6
docs/examples/tooltip/advanced-usage.vue
View File

@ -5,9 +5,9 @@
placement="bottom"
effect="light"
>
<el-button @click="disabled = !disabled"
>click to {{ disabled ? 'active' : 'close' }} tooltip function</el-button
>
<el-button @click="disabled = !disabled">
click to {{ disabled ? 'active' : 'close' }} tooltip function
</el-button>
</el-tooltip>
</template>

1
docs/examples/upload/custom-thumbnail.vue
View File

@ -35,6 +35,7 @@
<img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

1
docs/examples/upload/manual.vue
View File

@ -20,6 +20,7 @@
</template>
</el-upload>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { UploadInstance } from 'element-plus'