Vue3实现自定义分段控制器Segmented组件
效果如下图：在线预览
APIs
Segmented
参数
说明
类型
默认值
block
是否将宽度调整为父元素宽度，同时所有选项占据相同的宽度
boolean
false
disabled
是否禁用
boolean
false
options
选项数据
string[] | number[] | SegmentedOption[]
[]
size
控件尺寸
‘small’ | ‘middle’| ‘large’
‘middle’
value v-model
当前选中的值
string | number
undefined
SegmentedOption Type
名称
说明
类型
默认值
label?
选项名
string
undefined
value
选项值
string | number
undefined
disabled?
是否禁用选项
boolean
false
payload?
自定义数据载体
any
undefined
Events
名称
说明
类型
change
选项变化时的回调函数
(value: string
number) => void
创建分段控制器组件Segmented.vue
class="m-segmented" :class="{ 'segmented-small': size == 'small', 'segmented-large': size == 'large', 'segmented-block': block }" > class="m-segmented-item" :class="{ 'segmented-item-selected': value === getOptionValue(option), 'segmented-item-disabled': disabled || getOptionDisabled(option), 'segmented-item-block': block }" v-for="(option, index) in options" :key="index" @click="disabled || getOptionDisabled(option) ? () => false : onSelected(getOptionValue(option))" > type="radio" class="segmented-item-input" :checked="value === getOptionValue(option)" :disabled="disabled || getOptionDisabled(option)" /> class="segmented-item-label" :title="typeof option === 'object' && option.payload ? undefined : String(getOptionLabel(option))" > name="label" :label="getOptionLabel(option)" :payload="typeof option === 'object' ? option.payload : {}" > { { getOptionLabel(option) }}