uni——单选、多选、复选款自定义样式、重置
自定义 样式 重置 uni 单选 多选
2023-09-14 09:04:08 时间
单选
案例演示
案例代码
<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
相关文章
- 自定义scroll滑块样式
- laravel 自定义分页样式「建议收藏」
- jenkins自定义构建参数_查看git仓库列表
- Vue03基础语法--Vue组件+样式绑定+修饰符+常用控件+自定义指令+自定义事件
- EasyCVR如何快速自定义修改级联国标设备的通道编号?
- 自定义 Button 的外观和交互行为
- 【小程序】自定义组件样式
- WordPress 顶部工具栏完全自定义指南
- 微信机器人详细介绍:自定义菜单
- WordPress 自定义字段(Custom Fields)详细介绍和使用
- [javaSE] 注解-自定义注解详解编程语言
- 设置Linux下图标样式的自定义(linux图标)
- php 二维数组自定义排序详解编程语言
- Shell自定义快捷键方法详解
- Linux自定义命令创建指南(linux创建自定义命令)
- 炫彩Linux:自定义窗口主题(linux窗口主题)
- 存储使用Redis实现自定义对象存储(redis 自定义对象)
- jqueryvalidateposhytip自定义样式
- wordpress主题支持自定义菜单及修改css样式实现方法
- PHP自定义大小验证码的方法详解
- GridView分页的实现以及自定义分页样式功能实例
- list泛型自定义排序示例
- android开发教程之自定义控件checkbox的样式示例
- JavaScript保留两位小数的2个自定义函数
- Android中自定义WindowTitle样式实例
- 使用JQuery库提供的扩展功能实现自定义方法