Bootstrap

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

单选

案例演示

在这里插入图片描述

案例代码

<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;
	}
}

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
SpringBoot Web依赖
爬虫入门2 数据接口加密以及爬虫案例
如何监控局域网电脑屏幕：内网桌面监控软件哪个好 有哪些
yolov5的分布式训练问题
12款最常使用的网络爬虫工具推荐
【C语言】将两个字符串连接起来
最通俗易懂的理解API和SDK
ThreadPoolTaskExecutor和ThreadPoolExecutor区别
html中部分重要或有趣的标签讲解
Linux下Markdown的安装及常用语法
;