uni——单选、多选、复选款自定义样式、重置

已于 2024-04-06 09:03:31 修改
阅读量5.3k 收藏 17
点赞数 4
分类专栏： uni、vue 文章标签： javascript 前端 css uni-app
于 2022-11-28 22:05:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xulihua_75/article/details/128088223
版权

单选

案例演示

在这里插入图片描述

案例代码

<radio-group @change="radioChange">
	<label v-for="(item, index) in radioList" :key="item.value"
		:class="index === current?'option_active item':'option_default item'">
		<view class="radioHidden">
			<radio :value="item.value" :checked="index === current" />
		</view>
		<view>{{item.value}}. {{item.title}}</view>
	</label>
</radio-group>

data() {
	return {
		// 单选题
		radioList: [{
				value: 'A',
				title: '基本法',
			},
			{
				value: 'B',
				title: '根本法'
			},
			{
				value: 'C',
				title: '一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法'
			},
			{
				value: 'D',
				title: '普通法律'
			}
		],
		current: '',
		// 单选的选中项
		radioValue: '',
	}
},
methods: {
	// 单选题
	radioChange(evt) {
		for (let i = 0; i < this.radioList.length; i++) {
			if (this.radioList[i].value === evt.detail.value) {
				this.current = i;
				break;
			}
		}
		this.radioValue = this.radioList[this.current].value
		console.log(this.radioValue);
	},
}

.item {
	display: flex;
	padding: 16rpx 27rpx;
	margin-bottom: 10rpx;
	background: #D45A53;
	border-radius: 31rpx;
	font-size: 30rpx;
	color: #FFFFFF;
}

// 选中的颜色
.option_active {
	background: #D52101;
}

// 默认颜色
.option_default {
	background: #D45A53;
}
.radioHidden {
	display: none;
}

网址

因为单选按钮不需要展示，所以需要隐藏掉
https://uniapp.dcloud.net.cn/component/radio.html

多选

案例演示

在这里插入图片描述

案例代码

<checkbox-group @change="checkboxChange">
	<label v-for="(item, index) in checkboxList" :key="item.value"
		:class="item.checked?'option_active item':'option_default item'">
		<view class="checkboxHidden">
			<checkbox :value="item.value" :checked="item.checked" />
		</view>
		<view>{{item.value}}. {{item.title}}</view>
	</label>
</checkbox-group>

data() {
	return {
		// 多选题
		checkboxList: [{
				value: 'A',
				title: '基本法',
			},
			{
				value: 'B',
				title: '根本法'
			},
			{
				value: 'C',
				title: '一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法'
			},
			{
				value: 'D',
				title: '普通法律'
			}
		],
		// 复选的选中项
		checkValue: []
	}
},
methods: {
	// 多选题
	checkboxChange(e) {
		var items = this.checkboxList,
			values = e.detail.value;
		for (var i = 0, lenI = items.length; i < lenI; ++i) {
			const item = items[i]
			if (values.includes(item.value)) {
				this.$set(item, 'checked', true)
			} else {
				this.$set(item, 'checked', false)
			}
		}
		this.checkValue = values.sort();//将其排个序
		console.log(this.checkValue);
	}
}

.item {
	display: flex;
	padding: 16rpx 27rpx;
	margin-bottom: 10rpx;
	background: #D45A53;
	border-radius: 31rpx;
	font-size: 30rpx;
	color: #FFFFFF;
}

// 选中的颜色
.option_active {
	background: #D52101;
}

// 默认颜色
.option_default {
	background: #D45A53;
}

.checkboxHidden {
	display: none;
}

其他样式

在这里插入图片描述

代码

<checkbox-group @change="checkboxChange">
	<label v-for="(item, index) in checkboxList" :key="item.value"
		:class="item.checked?'option_active checkCss':'option_default checkCss'">
		<view class="checkboxHidden">
			<checkbox :value="item.value" :checked="item.checked" />
		</view>
		<view class="checkCircle"></view>
		<view class="checkTxt">{{item.title}}</view>
	</label>
</checkbox-group>

checkboxList: [{
		value: '1',
		title: '基本法',
	},
	{
		value: '2',
		title: '根本法'
	},
	{
		value: '3',
		title: '一般法律法'
	},
	{
		value: '4',
		title: '普通法律'
	}
],
// 复选的选中项
checkValue: [],

// 日期复选框
checkboxChange(e) {
	var items = this.checkboxList,
		values = e.detail.value;
	for (var i = 0, lenI = items.length; i < lenI; ++i) {
		const item = items[i]
		if (values.includes(item.value)) {
			this.$set(item, 'checked', true)
		} else {
			this.$set(item, 'checked', false)
		}
	}
	this.checkValue = values.sort();
	console.log(this.checkValue);
},
//日期重置
resetBtn() {
	console.log("重置");
	this.checkboxList.forEach((item) => {
		console.log(item);
		item.checked = false
	})
	this.checkValue = []
},

.checkCss {
	display: flex;
	align-items: center;
	height: 100rpx;
	border-top: 1rpx solid #E6E6E6;
	font-size: 28rpx;
}

// 选中的颜色
.option_active {
	color: orange;
	position: relative;
}

.option_active::after {
	content: '';
	position: absolute;
	left: 30rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 30rpx;
	height: 30rpx;
	border-radius: 50%;
	background-color: #F47428;
}
.option_active::before{
	content: '';
	position: absolute;
	left: 35rpx;
	top: 42%;
	transform: translateY(-50%);
	width: 18rpx;
	height: 10rpx;
	border-left:2rpx solid #ffffff;
	border-bottom:2rpx solid #ffffff;
	transform: rotate(-45deg);
	z-index: 4;
}
// 默认颜色
.option_default {
	color: #000000;
	position: relative;
}

.option_default::after {
	content: '';
	position: absolute;
	left: 30rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 30rpx;
	height: 30rpx;
	border-radius: 50%;
	border: 1rpx solid #484848;
	box-sizing: border-box;
}

.checkboxHidden {
	display: none;
}

.checkTxt {
	margin-left: 80rpx;
}

如果打印文字

在这里插入图片描述
在这里插入图片描述

网址

因为复选按钮不需要展示，所以需要隐藏掉，点击顺序不同时，会出现[‘D’,‘A’]的顺序，使用js拍个序即可
https://uniapp.dcloud.net.cn/component/checkbox.html

其他类型多选

在这里插入图片描述

<template>
	<view class="content">
		<checkbox-group @change="checkboxChange">
			<view v-for="(item, index) in checkboxList" :key="item.value">
				<view class="siteBox">
					<view class="checkTxt">{{item.title}}</view>
					<view class="checkboxHidden">
						<checkbox :value="item.value" :checked="item.checked" color="#0000ff"
							style="transform:scale(0.7)" />
					</view>
				</view>
				<view class="showBox" v-if="item.checked">
					<view class="inputBox">
						<view class="left">分成比例</view>
						<view class="right"><input type="text" placeholder="比例填写" v-model="item.num1"></view>
					</view>
					<view class="inputBox">
						<view class="left">扫码比例</view>
						<view class="right"><input type="text" placeholder="比例填写" v-model="item.num2"></view>
					</view>
				</view>
			</view>
		</checkbox-group>
		<button @click="baocun">保存</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkboxList: [{
						value: '1',
						title: '场地1',
						num1:'',
						num2:'',
					},
					{
						value: '5',
						title: '场地2',
						num1:'',
						num2:'',
					},
					{
						value: '7',
						title: '场地3',
						num1:'',
						num2:'',
					},
					{
						value: '89',
						title: '场地4',
						num1:'',
						num2:'',
					}
				],
				// 复选的选中项
				checkValue: [],
				subList:[]

			}
		},
		onLoad() {

		},
		methods: {
			// 日期复选框
			checkboxChange(e) {
				var items = this.checkboxList,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				} 
				console.log(this.checkValue);
			},
			baocun(){
				this.subList=[]
				this.checkboxList.forEach((item)=>{
					if(item.checked == true){
						this.subList.push(item)
					}
				})
				console.log(this.checkboxList);
				console.log(this.subList);
			}
		}
	}
</script>

<style lang="scss">
	.siteBox {
		margin: 0 20rpx;
		// border: 1px solid red;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.showBox {
		margin: 0 20rpx;

		.inputBox {
			font-size: 26rpx;
			display: flex;
			justify-content: space-between;
			padding: 10rpx 0;
			input{
				text-align: right;
				font-size: 26rpx;
			}
		}
	}

</style>

案例样式

uni+vue2+uview2.0
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

案例代码

<view class="row">
	<view class="rowLeft">订单备注</view>
	<view class="rowRight" @click="openRemark">
		<text :class="{'remarkCss':true,'garyColor': remarkValue=='',}">{{remarkValue?remarkValue:'选填，可填写配送注意事项等'}}</text>
	</view>
</view>
<!-- 备注多选 -->
<u-popup :show="remarkPup" @close="closeRemark" mode="bottom" :closeable="true">
	<view class="remarkBox">
		<view class="re_title">请选择订单备注（可多选）</view>
		<view class="chooseBox">
			<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
				<u-checkbox :customStyle="{marginBottom: '8px',height:'60rpx'}"
					v-for="(item, index) in checkboxList1" :key="index" :label="item.title"
					:name="item.title" activeColor="#54BC34">
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="confirmChoose" @click="confirmChoose">确定</view>
	</view>
</u-popup>

data() {
	return {
		// 备注多选
		checkboxValue1: [],
		checkboxList1: [],
		remarkPup: false,
		remarkValue: ''
	}
},



methods: {
	// 备注多选
	openRemark() {
		this.remarkPup = true
	},
	checkboxChange(n) {
		console.log('change', n);
	},
	closeRemark() {
		this.remarkPup = false
	},
	getRemarks() {
		this.$common.request('post', '/order/getMemoLists').then((res) => {
			if (res.code == 1) {
				this.checkboxList1 = res.data
				this.checkboxList1.map((item) => {
					item.disabled = false
				})
				console.log(this.checkboxList1);
			}
		})
	},
	confirmChoose() {
		console.log(this.checkboxValue1);
		this.remarkValue = this.checkboxValue1.join()
		this.remarkPup = false
	},
}

// 备注
.garyColor {
	color: #B8B8B8;
}

.remarkBox {
	min-height: 20vh;
	position: relative;

	.re_title {
		text-align: center;
		font-weight: bold;
		font-size: 30rpx;
		line-height: 100rpx;
	}

	.chooseBox {
		margin: 10rpx 4%;
	}

	.confirmChoose {
		position: absolute;
		bottom: 30rpx;
		left: 5%;
		width: 90%;
		border-radius: 50rpx;
		background-color: #54BC34;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		height: 80rpx;
	}
}

多选 vue3

在这里插入图片描述

<view class="tags">
	<checkbox-group @change="chooseTags">
		<label v-for="(item, index) in tagList" :key="item.value"
			:class="{'tagItem':true,'tagActive':item.checked}">
			<view class="checkboxHidden">
				<checkbox :value="item.value" :checked="item.checked" />
			</view>
			<view>{{item.title}}</view>
		</label>
	</checkbox-group>
</view>


其余写法：	
tagList.value = res.data.check_type.map(item => {
	return {
		...item,
		checked: false
	};
})

const tagList = ref([{
		value: '1',
		title: '自由的灵魂',
	},
	{
		value: '2',
		title: '孤僻'
	},
	{
		value: '3',
		title: '疯言疯语'
	},
	{
		value: '4',
		title: '风风火火的少年'
	}
])

const selectArr = ref([])//选中的多个标签

// 标签选择
function chooseTags(e) {
	const values = e.detail.value;
	tagList.value.forEach(item => {
		if (values.includes(item.value)) {
			item.checked = true;
		} else {
			item.checked = false;
		}
	});
	selectArr.value = values.sort().join(','); //将其排个序
	console.log(selectArr.value);
}

.tags {
	margin-top: 30rpx;

	.tagItem {
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 1rpx solid #7E7E7E;
		font-size: 26rpx;
		color: #3D3D3D;
		display: inline-block;
		padding: 9rpx 20rpx;
		margin-right: 20rpx;
		margin-bottom: 23rpx;
	}

	.tagActive {
		background: #FFF5FA;
		border: 1rpx solid #F364B3;
		color: #F364B3;
	}

	.checkboxHidden {
		display: none;
	}
}
耶啵奶膘
关注
  • 4
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序实现单选多选功能
12-29
小程序的单选组件radio和多选组件checkbox的样式只提供更改颜色，这对实际项目中的需求显然是不够的，所以自己模拟实现一个。 踩坑点：小程序不支持操作dom 1、模拟实现多选框： 实现思路：思路非常简单，给每个选项绑定checked属性，类型为布尔值，点击取反即可 <!--wxml--> <view class='wrap'> <view class='checkbox-con'> <checkbox bindchange=checkboxChange> <label class={{item.checked?'checkbox checked':'check
uni-app-小程序自定义底部菜单样式示例
08-12
【uni-app小程序自定义底部菜单样式示例】 在uni-app框架中，开发微信小程序、支付宝小程序、H5等多端应用时，我们经常会遇到需要自定义底部导航菜单的需求，以实现更加个性化和一致性的用户体验。本示例将详细介绍...
uniapp实现单选组件覆盖选中样式
qq_61950936的博客
03-27 639
【代码】uniapp实现单选组件覆盖选中样式。
uni-app 提交完表单，自动重置表单
最新发布
希默
06-06 772
uni-app 并没有给表单组件提供类似resetForm的 API，只能通过这两种方法实现，如果有其他方法，欢迎其一探讨。
【uniapp】单选框、复选框点击整行选中效果实现
Komorebi_00的博客
05-15 578
单选框 <view class="list-item" v-for="(item, index) in cardList" :key="index" @click="radioChange(item)"> <image class="list-item-icon" :src="item.bankUrl" mode=""></image> <view class="list-item-name">{{ item.bankName }}</view&
uniapp多选标签/多选按钮/多选框源码
12-01
该项目用hbuilder可直接导入运行，实现多选框操作，对于初学者，学习遍历，动态给样式赋值。
uniapp中单选按钮的实现
weixin_64103049的博客
10-25 1万+
uniapp中单选按钮的实现
《uni-app》表单组件-Checkbox组件
热门推荐
Oliver尹的博客
08-31 1万+
本文主要分享了uni-app中内置组件checkbox的一些用法，主要包括属性如value属性，禁用属性，选中属性等，以及checkbox提供的默认事件change的使用，最后示例了一个结合v-for指令，button组件完成了一个动态生成checkbox并获取选中值的示例demo；.........
uni-app:实现列表单选功能
weixin_46001736的博客
08-04 2575
uni-app:实现列表单选功能
uniapp实现---单选题按钮
weixin_54721820的博客
03-05 1211
使用样式布局控制单选框的位置，这里使用的是原生态uniapp，并没有使用组件。②JavaScript 内容。可以单选，选中的颜色，可以根据自己的需要调节。
layui-table表复选框勾选的所有行数据获取的例子
12-29
项目需求，可以用复选框勾选项目进行提交，如下表 <th lay-data={type:>ID <th lay-data={field:>ID 测试项 <th lay-data={field:'t2', edit:
uniapp uni-calendar日期组件多选
03-07
uniapp uni-calendar日期组件多选 内附参考使用代码
uniapp实现单选框
狼性书生
02-26 1143
采用uniapp-vue3实现的一款单选框组件，提供丝滑的动画选中效果，支持不同主题配置，适配web、H5、微信小程序（其他平台小程序未测试过，可自行尝试）
uniapp中组件库的Radio 单选框丰富的使用方法
精通前端技术，了解后端接口
01-03 5236
可以通过设置shape为square或者circle，将单选框设置为方形或者圆形此处所指的颜色，为radio选中时的背景颜色，参数为
uniapp---多选框功能
m0_71130954的博客
09-07 1931
【代码】uniapp---多选框功能。
Uniapp开发中实现单选checkbox的正确方式
近10年前端开发工作经验，为你分享日常经验所得
03-13 2114
实现Uniapp中的单选checkbox
uniapp实现下拉多选框
m0_70337053的博客
07-28 1万+
uniapp实现封装下拉多选组件
uni-app——下拉框多选
Tianxiaoxixi的博客
08-04 8187
uni-app——下拉框多选
uni-app:分页实现多选功能
weixin_46001736的博客
08-04 2834
uni-app:分页实现多选功能
uniapp单选框复选框
09-08
在uni-app中，单选框和复选框可以使用checkbox组件来实现。在基础用法下，uni-app会使用内置的默认参数来显示checkbox的样式和状态。然而，这种用法不能满足实际业务场景的需求，因为复选框通常以组的形式出现，即使组中只有一个选项。为了引入组的概念，uni-app还提供了一个checkbox-group组件来使用。基本用法是将checkbox组件放置在checkbox-group组件内，如下所示： <checkbox-group> <checkbox /> 篮球 <checkbox /> 足球 <checkbox /> 网球 </checkbox-group> 可以通过checkbox组件的disabled属性来控制复选框是否可选中或取消选中。当复选框处于disabled状态时，复选框的样式将变灰，用户无法进行选中或取消选中操作。disabled属性的类型为Boolean，默认值为false。 为了修改checkbox的样式，可以通过设置相应的CSS样式来实现。比如，可以使用uni-checkbox类来修改复选框的外观。uni-checkbox-input类可以用来设置复选框选中状态的样式。在样式中，可以设置border-radius属性来改变复选框的圆角，color属性来改变复选框的颜色，border属性来设置选中状态的边框，background属性来设置选中状态的背景色，以及其他一些样式属性来调整复选框的大小和位置。 综上所述，uni-app提供了方便的单选框和复选框组件，可以通过设置属性和样式来满足不同的需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值