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

已于 2024-04-06 09:03:31 修改
阅读量4.9k 收藏 16
点赞数 3
分类专栏： 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;
	}
}
耶啵奶膘
关注
  • 3
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 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_48378883的博客
01-22 604
【代码】uniapp封装自定义单选多选。
uniapp踩坑之项目：uni-app实现下拉框多选
意初的博客
05-08 1352
uniapp踩坑之项目：uni-app实现下拉框多选。一、首先创建组件，二、将组件引入单页面使用
【uniapp】单选框、复选框点击整行选中效果实现
最新发布
Komorebi_00的博客
05-15 475
单选框 <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:单选、复选、文本（使用普通标签）一
weixin_46899191的博客
11-26 535
单选、复选、文本 //这个方法处理数据较方便 <template> <view> <view class="content" v-for='(item,index) in list' :key='index'> <view class="">{{index+1+'、'+item.itemName}}{{item.type==0?'(单选)':item.type==1?'(多选)':''}}</view> <view clas
uniapp实现---单选题按钮
weixin_54721820的博客
03-05 1088
使用样式布局控制单选框的位置，这里使用的是原生态uniapp，并没有使用组件。②JavaScript 内容。可以单选，选中的颜色，可以根据自己的需要调节。
uni-app:分页实现多选功能
weixin_46001736的博客
08-04 2728
uni-app:分页实现多选功能
uni-app中使用选择框图片来写单选，多选，以及不可选择
lll19960406的博客
05-27 2279
(check.png)(checkbox.png)(checkDisable.png) 以上三张图是我的可选择状态，已选中，以及不可选择等三种；接下来来写几种使用情景；具体样式我不再细写了，只说逻辑，需要说明image需要放在你所选择的循环里，比如如下，仅做展示，样式可以根据需要写 1：只支持单选，并且都可以选择 <image v-if="orderarr.length!=0" @c...
uni-app 之 picker选择器
jun_tong的博客
09-18 3669
uni-app 之 picker选择器
uniapp 单选框
qq_37455326的博客
01-17 464
【代码】uniapp 单选框。
uni.app点击按钮实现全选全不选 单选
Dummerd的博客
11-23 1693
全选全不选按钮
uniapp多选标签/多选按钮/多选框源码
12-01
多选按钮（Multiple Select Buttons）常用于复选操作，一般表现为一组按钮，用户可以勾选多个。在`uni-app`中，可以使用`<uni-checkbox-group>`和`<uni-checkbox>`组件组合来实现。`<uni-checkbox-group>`作为容器，...
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:单选、多选、文本（使用radio等组件，先整理参数再提交）二
weixin_46899191的博客
11-15 1311
双层循环之radio、checkbox、textarea ) 代码片. // An highlighted block <template> <view class="box"> <view class="content"> <!-- 0:单选,1:多选,2:简单回答 --> <view style="margin: 28rpx 0 0 0;" v-if='radioList.length>0'>
uni-app 微信小程序自定义radio样式
Xinacridine的博客
03-07 1497
/* radio 选中后的样式 */ /deep/ uni-radio .uni-radio-input.uni-radio-input-checked { background-color: #65D9CD !important; border-color: #65D9CD !important; background-clip: content-box !important; padding: 7rpx !important; box-sizing: border-box; .
uni-app 之组件 入门教程 uniapp在线教程 uni app视频教程
04-22
讲解uni-app中如何使用组件，主要讲解了基础组件，表单组件等常用的组件，课程主要是针对uni app组件入门学习者。
uni-app 更改默认checkbox组件样式
热门推荐
zhangxy
08-28 2万+
更改的时候需要注意以下几点： 1、因为uni-app的默认组件是定义好了的，如果要修改可以找到组件所属css，也可以自行修改样式并覆盖原有样式。 2、选择自行修改的时候，一定在app.vue页面去引入更改的css或者直接在此页面进行修改，否则修改无效。 3、不要在style中增加scoped属性。 4、注意小程序中跟h5页面是略有不同的，如下官方语句 以下附加我更改的样式： /...
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、付费专栏及课程。

余额充值