70 lines
1.5 KiB
Vue
70 lines
1.5 KiB
Vue
<template>
|
|
<radio-group class="u-flex u-flex-wrap" @change="change">
|
|
<label class="radio u-m-r-60" v-for="(item,itemIndex) in list" :key="index">
|
|
<radio :value="index" :checked="itemChecked(item,itemIndex)" class="scale7" />
|
|
<text>{{item.label}}</text>
|
|
</label>
|
|
</radio-group>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
computed,
|
|
ref,
|
|
watch
|
|
} from 'vue';
|
|
const props = defineProps({
|
|
rangeValue: {
|
|
type: [String, Number],
|
|
default: ''
|
|
},
|
|
rangeKey: {
|
|
type: String,
|
|
default: 'label'
|
|
},
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '标题'
|
|
},
|
|
modelValue: {
|
|
type: [String, Number],
|
|
default: ''
|
|
}
|
|
})
|
|
function itemChecked(item,itemIndex){
|
|
if(!props.rangeValue){
|
|
return itemIndex==index.value
|
|
}
|
|
return item[props.rangeValue]=props.list[index.value][props.rangeKey]
|
|
}
|
|
function findIndex() {
|
|
return props.list.findIndex(v => v[props.rangeValue] == props.modelValue)
|
|
}
|
|
|
|
function findValue() {
|
|
return props.list[index.value][props.rangeValue]
|
|
}
|
|
const computedIndex = props.rangeValue ? findIndex() : props.modelValue
|
|
const index = ref(computedIndex)
|
|
const emits = defineEmits(['update:modelValue'], )
|
|
watch(() => index.value, (newval) => {
|
|
const value = props.rangeValue ? findValue() : newval
|
|
console.log(value);
|
|
emits('update:modelValue', value)
|
|
})
|
|
|
|
function change(e) {
|
|
index.value = e.detail.value
|
|
}
|
|
const selText = computed(() => {
|
|
const item = props.list[index.value]
|
|
return item ? item[props.rangeKey] : ''
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
</style> |