更新记录
1.0.1(2023-11-29)
1、更新了md文档
2、编写了参数注释
3、增加判断 当picker-view处于滚动时,不能点击确定按钮,需要滚动结束后才能点击
1.0.0(2022-04-20)
首次提交
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue app-nvue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
使用组件
<m-picker mode="bottom" :show.sync="show" :range="list" @confirm="confirm"></m-picker>
引入组件
import mPicker from '@/components/jarvis-picker/m-picker.vue';
注册组件
export default {
components: { mPicker },
data() {
return {
show: true,
list: [
[
{
label: '男',
value: 0
},
{
label: '女',
value: 1
},
{
label: '未知',
value: 2
}
]
]
}
},
methods: {
confirm(e) {
console.log(e);
}
}
}
参数
参数 |
说明 |
类型 |
可选值 |
默认值 |
mark |
是否显示遮罩 |
Boolean |
true/false |
true |
markClose |
点击遮罩是否关闭 |
Boolean |
true/false |
true |
btnClose |
点击按钮是否关闭 |
Boolean |
true/false |
true |
show |
是否显示弹窗 |
Boolean |
true/false |
false |
range |
数据 |
Array |
|
[] |
rangeKey |
picker-item显示内容的key |
String |
|
label |
indicatorStyle |
设置选择器中间选中框的样式 |
String |
|
height: 50px; |
indicatorClass |
设置选择器中间选中框的类名,注意页面或组件的style中写了scoped时,需要在类名前写/deep/ |
String |
|
|
cancelText |
cancel文字 |
String |
|
取消 |
confirmText |
confirm文字 |
String |
|
确定 |
cancelStyle |
cancel样式style |
Object |
|
|
confirmStyle |
confirm样式style |
Object |
|
|
height |
内容高度 rpx |
Number |
|
500 |
borderRadius |
圆角 rpx |
Number |
|
16 |
bgColor |
背景颜色 |
String |
|
#FFFFFF |
markBgColor |
mark 背景颜色 |
String |
|
#00000080 |
mode |
方向 |
String |
top/bottom/center |
bottom |
Slots
name |
说明 |
default |
自定义内容 会覆盖默认的picker-view |
handle |
按钮部分 |
Events
name |
说明 |
参数 |
confirm |
点击确定按钮时触发 |
选中的索引数组 |
cancel |
点击取消按钮时触发 |
e: 事件对象 |