更新记录
1.0.2(2022-06-10)
下载此版本
- 修复自定义更新rangeKey
1.0.1(2022-06-09)
下载此版本
- 新增 是否可搜索 is_search
1.0.0(2022-06-09)
下载此版本
- 新增 列表可搜索 2.选择返回为对象
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.4.13 app-vue app-nvue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
wly-list-picker
使用组件
<wly-list-picker mode="bottom" :show.sync="show" :range="list" @confirm="confirm"></wly-list-picker>
注册组件
export default {
components: { mPicker },
data() {
return {
show: true,
list: [
[
{
label: "男",
value: 0,
},
{
label: "女",
value: 1,
},
{
label: "未知",
value: 2,
},
],
],
};
},
methods: {
confirm(e) {
console.log(e);
},
},
};
说明
默认搜索第 0 个数组数据
参数
字段 |
类型 |
默认值 |
说明 |
is_search |
Boolean |
true |
是否可搜索 |
mark |
Boolean |
true |
是否显示遮罩 |
markClose |
Boolean |
true |
点击遮罩是否关闭 |
btnClose |
Boolean |
true |
点击按钮是否关闭 |
show |
Boolean |
fale |
是否显示弹窗 |
range |
Array |
[] |
数据 |
rangeKey |
String |
'label' |
picker-item 显示内容的 key |
indicatorStyle |
String |
'height: 50px;' |
设置选择器中间选中框的样式 |
indicatorClass |
String |
' ' |
设置选择器中间选中框的类名,注意页面或组件的 style 中写了 scoped 时,需要在类名前写/deep/ |
cancelText |
String |
取消 |
cancel 文字 |
confirmText |
String |
确定 |
confirm 文字 |
cancelStyle |
Object |
{} |
cancel 样式 style |
confirmlStyle |
Object |
{} |
confirm 样式 style |
height |
Number |
500 |
内容高度 rpx |
borderRadius |
Number |
16 |
圆角 rpx |
bgColor |
String |
'#FFFFFF' |
背景颜色 |
mode |
String |
bottom |
方向 top/bottom/center |