更新记录

1.0.1(2025-01-13) 下载此版本

优化说明文挡

1.0.0(2025-01-13) 下载此版本

新增组件


平台兼容性

Vue2 Vue3
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 选择器关闭触发的事件

注:包体积偏大是因为有示例图片,真正会打包到项目中的体积是很小的

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问