first

pagePrinter/add-printer/components/my-radio-group.vue

@@ -0,0 +1,70 @@
+<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>