长春火车站什么时候通车,做网站网页文件,宁波app制作,寻找建设网站客户采用uniapp-vue3实现的一款单选框组件#xff0c;提供丝滑的动画选中效果#xff0c;支持不同主题配置#xff0c;适配web、H5、微信小程序#xff08;其他平台小程序未测试过#xff0c;可自行尝试#xff09; 可到插件市场下载尝试#xff1a; https://ext.dcloud.net… 采用uniapp-vue3实现的一款单选框组件提供丝滑的动画选中效果支持不同主题配置适配web、H5、微信小程序其他平台小程序未测试过可自行尝试 可到插件市场下载尝试 https://ext.dcloud.net.cn/plugin?id16821 使用示例 示例代码
templateviewview classlight stylebackground-color: whitewo-radio v-model:optionsstate.items v-model:defaultValuestate.default on-changechangeEvent/wo-radio/viewview classlightwo-radio v-model:optionsstate.items v-model:defaultValuestate.default v-model:styleObjstate.theme.light v-slotslotProps on-changechangeEventview styledisplay: flex;view{{ slotProps.data.name }}/viewview classtag{{ slotProps.data.tag }}/view/view/wo-radio/viewview classdarkwo-radio v-model:optionsstate.items v-model:defaultValuestate.default v-model:styleObjstate.theme.dark v-slotslotProps on-changechangeEventview styledisplay: flex;view{{ slotProps.data.name }}/viewview classtag{{ slotProps.data.tag }}/view/view/wo-radio/view/view/templatescript setup langtsimport { reactive } from vue;const state reactive({items: [{value: 1,name: 苹果味,tag: 饮料},{value: 2,name: 香蕉味,tag: 酒水},{value: 3,name: 火龙果味,tag: 饮料},{value: 4,name: 西瓜味,tag: 饮料},{value: 5,name: 哈密瓜味,tag: 酒水},{value: 6,name: 榴莲味,tag: 酒水}],default: 2,theme: {light: {primary: blue,unselectedRadioBg: #eaeaea,selectedBg: hsla(0,0%,100%,0.5),height: 20},dark: {primary: blue,unselectedRadioBg: hsl(223,90%,30%),selectedBg: hsla(223,90%,30%,0.5),height: 20}},height: 12});const changeEvent (el) {console.log(点击, el);}
/scriptstyle langscss scoped.light {border-radius: 10px;padding: 20rpx;font-size: 24rpx;background-color: hsl(223,90%,90%);margin: 20px;height: 300px;overflow: auto;}.dark {border-radius: 10px;padding: 20rpx;font-size: 24rpx;background-color: hsl(223,90%,10%);color: white;margin: 20px;height: 300px;overflow: auto;}.tag {background-color: #1BA035;color: white;font-size: 10px;display: flex;align-items: center;justify-content: center;border-radius: 4px;padding: 0 4px;margin-left: 5px;}
/style
