更新记录
1.0.0(2024-07-16)
下载此版本
有问题请文明反馈,看到就改。谢谢
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.7.3 app-vue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
jcy-check
使用示例
<template>
<view class="content">
<view style="padding: 100rpx;">
<view class="">
单选
</view>
<!-- 单选 -->
<jcy-check :list="checkList" type="1"
bgColor="#e3e5e7"
activeBgColor="#ffaa7f"
activeTextColor="#ffffff"
:defaultData="defaultData"
@chooseItem="chooseItem1"
@inputItem="inputItem1"
:defaultProps="defaultProps"
></jcy-check>
<view class="">
多选
</view>
<!-- 多选 -->
<jcy-check :list="checkList2"
type="2" bgColor="#e3e5e7"
activeBgColor="#00aa7f"
activeTextColor="#ffffff"
:defaultData="defaultData2"
@chooseItem="chooseItem2"
@inputItem="inputItem2"
:defaultProps="defaultProps"
></jcy-check>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
checkList:[{label:'苹果',value:1},{label:'香蕉',value:2}],
checkList2:[{label:'可乐',value:1},{label:'雪碧',value:2},{label:'橙汁',value:3}],
defaultData:[2],
defaultData2:[1,3],
defaultProps:{
id:'value',
name:'label'
}
}
},
methods: {
chooseItem1(e) {
console.log("单选----chooseItem---",e);
},
chooseItem2(e) {
console.log("多选----chooseItem---",e);
},
inputItem1(e){
console.log("单选ID---inputItem----",e);
},
inputItem2(e){
console.log("多选ID---inputItem----",e);
}
}
}
</script>
文档说明
1、属性说明
参数 |
类型 |
默认值 |
说明 |
list |
Array |
[] |
数据列表 |
defaultProps |
Object |
{id:'id',name:'name'} |
自定义类名 |
defaultData |
Array |
[] |
数据回显默认值 |
activeBgColor |
String |
'#cae4ff' |
默认选中颜色 |
type |
String |
'1' |
类型:'1'-单选 '2'-多选 |
color |
String |
'#fff' |
字体颜色 |
activeTextColor |
String |
'#409dff' |
选中字体颜色 |
bgColor |
String |
'#f6f6f6' |
选中前背景颜色 |
activeBgColor |
String |
"#cae4ff" |
选中后背景颜色 |
fontSize |
String |
'26rpx' |
字体大小 |
2、事件说明
名称 |
参数 |
说明 |
chooseItem |
item |
返回选中的集合元素所有信息 |
inputItem |
id |
返回选中的元素ID集合 |