mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-14 18:11:48 +08:00
2f17df1209
* perf: change to import-x * feat: add rules * chore: fix rule * chore: fix * chore: fix * chore: fix * style: `pnpm lint:fix` * Revert "style: `pnpm lint:fix`" This reverts commit db0116a288299c507e3cfc4d7a22e2207265d920. * Revert "chore: fix" This reverts commit 69c82a90c01525e38180be4c21e8ef5602512318. * chore: fix * style: `pnpm lint:fix` * fix: lint * chore: `pnpm format`
99 lines
1.8 KiB
Vue
99 lines
1.8 KiB
Vue
<template>
|
|
<div>
|
|
<el-segmented
|
|
v-model="size"
|
|
:options="sizeOptions"
|
|
style="margin-bottom: 1rem"
|
|
/>
|
|
<br />
|
|
<el-segmented
|
|
v-model="direction"
|
|
:options="directionOptions"
|
|
style="margin-bottom: 1rem"
|
|
/>
|
|
<br />
|
|
<el-segmented
|
|
v-model="value"
|
|
:options="options"
|
|
:direction="direction"
|
|
:size="size"
|
|
>
|
|
<template #default="scope">
|
|
<div
|
|
:class="[
|
|
'flex',
|
|
'items-center',
|
|
'gap-2',
|
|
'flex-col',
|
|
direction === 'horizontal' && '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'
|
|
|
|
import type { SegmentedProps } from 'element-plus'
|
|
|
|
const value = ref('Apple')
|
|
const direction = ref<SegmentedProps['direction']>('horizontal')
|
|
const size = ref<SegmentedProps['size']>('default')
|
|
|
|
const directionOptions = [
|
|
{ label: 'Horizontal', value: 'horizontal' },
|
|
{ label: 'Vertical', value: 'vertical' },
|
|
]
|
|
|
|
const sizeOptions = ['large', 'default', 'small']
|
|
|
|
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,
|
|
disabled: true,
|
|
},
|
|
]
|
|
</script>
|