mpvue3.0写单选

微信小程序的tab样式不符合 UI图样式，于是自己改写

1.准备radio样式，一共两种，一个是选中前，一个是选中后，传入iconfont的icon-oss里面的

2.写入两种图片的类,通过include 导入tab

.radio-btn {
  @include icon-oss('210330-choose-white');
}

.radio-btn-click {
  @include icon-oss('210330-choose-blue');
}

3.写html

<template v-for="item in kiloMeterRadio">
	<view
		:key="item"
		@click="choosedItem(item)">{{ item }}公里
			<view :class="{
                'radio-btn-click': checkedKiloNum === item,
                'radio-btn': checkedKiloNum !== item
            }"/>
    </view>
</template>

4.写方法

setup() {
	const checkedKiloNum = ref<number>(0)
	const choosedItem = (val: number) => {
	      checkedKiloNum.value = val
	}
	const kiloMeterRadio = computed(() => recommand.value.map(v => v.mileage))
	 //recommand是从接口拿到的数据,v.mileage则是所有公里数，赋值后kiloMeterRadio的值为 [1000, 2000, 3000]
	 return { checkedKiloNum, kiloMeterRadio }
}