uniapp实现单选框的示例代码
更新时间:2024年03月01日 15:43:13 作者:狼性书生
本文给大家介绍uniapp实现单选框的示例代码,采用uniapp-vue3实现的一款单选框组件,提供丝滑的动画选中效果,支持不同主题配置,适配web、H5、微信小程序,感兴趣的朋友跟随小编一起看看吧
采用uniapp-vue3实现的一款单选框组件,提供丝滑的动画选中效果,支持不同主题配置,适配web、H5、微信小程序(其他平台小程序未测试过,可自行尝试)
可到插件市场下载尝试: https://ext.dcloud.net.cn/plugin?id=16821
使用示例
示例代码
<template> <view> <view class="light" style="background-color: white"> <wo-radio v-model:options="state.items" v-model:defaultValue="state.default" @on-change="changeEvent"> </wo-radio> </view> <view class="light"> <wo-radio v-model:options="state.items" v-model:defaultValue="state.default" v-model:styleObj="state.theme.light" v-slot="slotProps" @on-change="changeEvent"> <view style="display: flex;"> <view>{{ slotProps.data.name }}</view> <view class="tag">{{ slotProps.data.tag }}</view> </view> </wo-radio> </view> <view class="dark"> <wo-radio v-model:options="state.items" v-model:defaultValue="state.default" v-model:styleObj="state.theme.dark" v-slot="slotProps" @on-change="changeEvent"> <view style="display: flex;"> <view>{{ slotProps.data.name }}</view> <view class="tag">{{ slotProps.data.tag }}</view> </view> </wo-radio> </view> </view> </template> <script setup lang="ts"> import { 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); } </script> <style lang="scss" 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>
到此这篇关于uniapp实现单选框的文章就介绍到这了,更多相关uniapp单选框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
最新评论