更新记录
1.0.0(2021-05-20)
下载此版本
发布组件
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
app-harmony |
? |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
z-multi-choose 底部多选弹层 使用说明
使用示例
<template>
<view class="content">
<view @tap="control = true">
点我弹窗
</view>
<z-multi-choose activeColor="red" idKey="uid" showKey="name" :list="list" :show="control" @maskTouch="cancle" @sure="sure" @cancle="cancle"></z-multi-choose>
</view>
</template>
<script>
import zMultiChoose from '@/components/z-multi-choose/z-multi-choose.vue';
export default {
data() {
return {
control:false,
list:[
{
name: '冉遗',
uid: 1,
},
{
name: '毕方',
uid: 2
},{
name:'鸾鸟',
uid:3
}
,{
name:'玃如',
uid:4
}
,{
name:'溪边',
uid:5
}
,{
name:'文鳐',
uid:6
}
,{
name:'白雉',
uid:7
},{
name:'白泽',
uid:8
}
]
};
},
components: {
zMultiChoose
},
methods: {
cancle(){
this.control = false
},
sure(e){
console.log(e)
this.control = false
}
}
};
</script>
<style>
</style>
参数说明
属性 |
类型 |
说明 |
默认值 |
show |
Boolean |
控制弹层的显示 |
false |
list |
Array |
数据 |
[] |
showKey |
String |
数组数据中,用于展示的字段名 |
text |
idKey |
String |
数组数据中,用于收集的字段名,应当确保唯一性 |
id |
activeColor |
String |
选中项的文字颜色 |
#007aff |
scrollHeight |
Number |
滚动区域高度(rpx) |
500 |
btnShowControls |
Array |
顶部按钮组的控制器,顺序是[取消,全选,清空,确定],该属性应当传入Boolean值的一维数组,确定按钮必然显示,不受此处控制 |
[true,true,true,true] |
btnColors |
Array |
顶部按钮组的颜色,顺序是[取消,全选,清空,确定],该属性应当传入合法颜色值的一维数组 |
['#007aff','#007aff','#007aff','#007aff'] |
contentTextColor |
String |
内容区域文字颜色 |
#111111 |
contentFontSize |
String |
内容区域文字字号 |
28rpx |
itemHeight |
Number |
每项高度(rpx) |
100 |
@maskTouch |
EventHandle |
用户点击了蒙层 |
|
@cancle |
EventHandle |
用户点击了取消按钮 |
|
@sure |
EventHandle |
用户点击了确定按钮 |
回传的参数请往下看详情 |
备注
你可以直接把请求回来的对象数组扔进来,但是,你要确保数组的每个对象都有唯一性的字段用于标识,设置 showKey、idKey 就可以开始使用插件了
list示例
list:[ { name: '冉遗', uid: 1, }, { name: '毕方', uid: 2 } ]
showKey 应传 'name' ,idKey 应传 'uid'
@sure 事件回传参数
idArr 数组,用户选中的唯一性字段的值
textArr 数组,用户选中的展示的值