更新记录
1.0.1(2025-01-13)
下载此版本
优化说明文挡
1.0.0(2025-01-13)
下载此版本
新增组件
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 |
× |
√ |
× |
× |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
× |
√ |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
hbxw-select选择器组件
介绍
选择器组件,可以实现单选/多选的选择器组件
使用示例
<template>
<view>
<button @click="selectfn(0)">单选</button>
<button @click="selectfn(1)">多选</button>
<hbxw-selector
v-model:isShow="isShowSlector0"
@picker="picker"
:options="options"
></hbxw-selector>
<hbxw-selector
v-model:isShow="isShowSlector1"
:isMultiple="true" :isAni="false"
@picker="picker"
:options="options"
></hbxw-selector>
</view>
</template>
<script>
const SELECT_OPTIONS = [
{
label: '7天无理由退款',
value: 1
},
{
label: '太贵了',
value: 2
},
{
label: '设备有问题',
value: 3
},
{
label: '不喜欢',
value: 4
},
{
label: '换货',
value: 5
},
{
label: '不想要了',
value: 6
},
{
label: '换型号',
value: 7
},
{
label: '体验流程',
value: 8
},
{
label: '其他',
value: 9
}
]
export default {
data() {
return {
options: SELECT_OPTIONS,
isShowSlector0: false,
isShowSlector1: false
}
},
methods: {
picker(res) {
console.log('---- picker ----:', res);
},
selectfn(index) {
this['isShowSlector'+index] = true;
}
}
}
</script>
<style>
</style>
API
Props
属性名 |
类型 |
默认值 |
必填 |
说明 |
options |
Array |
[] |
是 |
待选择数据,数据结构如上示例 |
label |
String |
label |
否 |
标准结构如上示例,但如果你想自定义label的key,可以配置此值 |
value |
String |
value |
否 |
标准结构如上示例,但如果你想自定义value的key,可以配置此值 |
isShow |
Boolean |
false |
是 |
选择器组件显示与隐藏 |
title |
String |
'请选择' |
否 |
选择器主标题 |
subTitle |
String |
'选择您要选择的选项' |
否 |
选择器副标题 |
isMultiple |
Boolean |
false |
否 |
是否支持多选 |
isMaskClick |
Boolean |
true |
否 |
是否点击遮罩可关闭 |
maskOpacity |
Number |
0.75 |
否 |
遮罩尝试配置0-1 |
zIndex |
Number |
9999 |
否 |
选择器层级 |
isAni |
Boolean |
true |
否 |
选择器是否需要打开关闭动效 |
Events
事件名 |
说明 |
返回值 |
picker |
选择器状态变化触发的事件 |
返回当前选择的结果,{selectIndexs:[1],selectOptions:[{label: '7天无理由退款', value: 1 }] |
open |
选择器打开触发的事件 |
无 |
close |
选择器关闭触发的事件 |
无 |
注:包体积偏大是因为有示例图片,真正会打包到项目中的体积是很小的