45 lines
753 B
Vue
45 lines
753 B
Vue
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue'
|
|
|
|
defineOptions({ name: 'MjSegment' })
|
|
|
|
const props = defineProps<{
|
|
modelValue: any
|
|
options: {
|
|
label: string
|
|
value: any
|
|
}[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: any): void
|
|
}>()
|
|
|
|
const value = computed({
|
|
get: () => props.modelValue,
|
|
set: val => {
|
|
emit('update:modelValue', val)
|
|
},
|
|
})
|
|
|
|
// 选项
|
|
const values = ref([] as string[])
|
|
|
|
// 点击
|
|
function click({ index }) {
|
|
value.value = props.options[index].value
|
|
}
|
|
|
|
watch(
|
|
() => props.options,
|
|
newVal => {
|
|
values.value = newVal.map(item => item.label)
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<tui-segmented-control :values="values" @click="click" />
|
|
</template>
|