uniapp实现单选框卡片选择器,支持微信小程序、H5等多端

采用uniapp-vue3实现的一款单选框卡片选择器,纯CSS实现样式和交互,提供丝滑的动画选中效果,支持不同主题配置,适配多端

可到插件市场下载尝试: https://ext.dcloud.net.cn/plugin?id=16901

  • 使用示例
  • 示例代码
javascript 复制代码
<template>
	<view>
		<view class="light">
			<wo-card-radio v-model:options="state.items" v-model:defaultValue="state.default" @on-change="changeEvent"></wo-card-radio>
		</view>
		<view class="dark">
			<wo-card-radio v-model:options="state.items" v-model:defaultValue="state.default" v-model:styleObj="state.theme.dark" @on-change="changeEvent"></wo-card-radio>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
const state = reactive({
	items: [
		{
			value: 'test',
			label: '中国农业银行',
			cardLinearColor: 'linear-gradient(45deg, #89c888, #1BA035)'
		},
		{
			value: 'test2',
			label: '中国工商银行',
			cardLinearColor: 'linear-gradient(45deg, #ff8c75, #FF4A3B)'
		},
		{
			value: 'test3',
			label: '中国建设银行',
			cardLinearColor: 'linear-gradient(45deg, #748DFB, #3859E8)'
		},
		{
			value: 'test2',
			label: '中国华夏银行',
			cardLinearColor: 'linear-gradient(45deg, #616161, #484848)'
		},
	],
	default: 'test3',
	theme: {
			light: {
				primary: 'blue',
				unselectedRadioBg: '#eaeaea',
				selectedBg: 'hsla(0,0%,100%,0.5)',
			},
			dark: {
				primary: 'blue',
				unselectedRadioBg: 'hsl(223,90%,30%)',
				selectedBg: 'hsla(223,90%,30%,0.5)'
			}
	}
});
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;
	}
</style>
相关推荐
DoraBigHead15 小时前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
LuckySusu15 小时前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
卓伊凡15 小时前
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓
前端
笨笨鸟慢慢飞15 小时前
Vue3后退不刷新,前进刷新
前端
LuckySusu15 小时前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu15 小时前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu15 小时前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js
fruge15 小时前
从 0 到 1 理解前端工程化:图表化解析核心逻辑
前端
LuckySusu15 小时前
【vue篇】技术分析:Template 与 JSX 的本质区别与选型指南
前端·vue.js
BestStarLi15 小时前
个人写码感悟:TailwindCSS不要忽视子选择器
前端