mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-15 03:06:25 +08:00
5a025e55bd
docs(components): [segmented] 'item' maybe declared in the upper scope Co-authored-by: 周进 <w857035085@126.com>
61 lines
1009 B
Vue
61 lines
1009 B
Vue
<template>
|
|
<div>
|
|
<el-segmented v-model="value" :options="options">
|
|
<template #default="scope">
|
|
<div class="flex flex-col items-center gap-2 p-2">
|
|
<el-icon size="20">
|
|
<component :is="scope.item.icon" />
|
|
</el-icon>
|
|
<div>{{ scope.item.label }}</div>
|
|
</div>
|
|
</template>
|
|
</el-segmented>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import {
|
|
Apple,
|
|
Cherry,
|
|
Grape,
|
|
Orange,
|
|
Pear,
|
|
Watermelon,
|
|
} from '@element-plus/icons-vue'
|
|
|
|
const value = ref('Apple')
|
|
|
|
const options = [
|
|
{
|
|
label: 'Apple',
|
|
value: 'Apple',
|
|
icon: Apple,
|
|
},
|
|
{
|
|
label: 'Cherry',
|
|
value: 'Cherry',
|
|
icon: Cherry,
|
|
},
|
|
{
|
|
label: 'Grape',
|
|
value: 'Grape',
|
|
icon: Grape,
|
|
},
|
|
{
|
|
label: 'Orange',
|
|
value: 'Orange',
|
|
icon: Orange,
|
|
},
|
|
{
|
|
label: 'Pear',
|
|
value: 'Pear',
|
|
icon: Pear,
|
|
},
|
|
{
|
|
label: 'Watermelon',
|
|
value: 'Watermelon',
|
|
icon: Watermelon,
|
|
},
|
|
]
|
|
</script>
|