27 lines
770 B
Vue
27 lines
770 B
Vue
<template>
|
|
<el-button v-for="(item, index) in props.data" :key="index" :type="modelValue === item.value ? 'primary' : ''" @click="handleChange(item)">{{
|
|
item.label
|
|
}}</el-button>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type{ PropType } from 'vue'
|
|
const props = defineProps({
|
|
data: {
|
|
type: Array as PropType<{ num?: number; label: string; value: string | number; [key: string]: any }[]>,
|
|
default: () => [],
|
|
},
|
|
})
|
|
|
|
const emits = defineEmits(['change'])
|
|
|
|
const modelValue = defineModel<number | string>('modelValue', {
|
|
required: true,
|
|
}) // 双向绑定的value
|
|
|
|
const handleChange = (value: { value: string | number; [key: string]: any }) => {
|
|
modelValue.value = value.value
|
|
emits('change', value)
|
|
}
|
|
</script>
|