uniapp實現(xiàn)單選框的示例代碼

更新時間：2024年03月01日 15:43:13 作者：狼性書生

本文給大家介紹uniapp實現(xiàn)單選框的示例代碼,采用uniapp-vue3實現(xiàn)的一款單選框組件,提供絲滑的動畫選中效果,支持不同主題配置,適配web、H5、微信小程序,感興趣的朋友跟隨小編一起看看吧

采用uniapp-vue3實現(xiàn)的一款單選框組件，提供絲滑的動畫選中效果，支持不同主題配置，適配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>

到此這篇關(guān)于uniapp實現(xiàn)單選框的文章就介紹到這了,更多相關(guān)uniapp單選框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: