更新记录

1.1.0（2025-07-14） 下载此版本

1.0.1（2025-01-13） 下载此版本

优化说明文挡

1.0.0（2025-01-13） 下载此版本

新增组件

平台兼容性

uni-app

hbxw-selector 选择器组件

介绍

选择器组件，可以实现单选/多选的选择器组件，支持自定义图标、底部操作区域和关闭按钮。

使用示例

基础用法

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。

<template>
    <view>
    <button @click="selectfn(0)">单选</button>
    <button @click="selectfn(1)">多选</button>
    <button @click="selectfn(2)">slot示例</button>
        <hbxw-selector 
      v-model:isShow="isShowSlector0" 
      @picker="picker" 
      :options="options"
      @confirm="confirm0"
    ></hbxw-selector>
        <hbxw-selector 
      v-model:isShow="isShowSlector1" 
      :isMultiple="true"
      :isAni="false" 
      @picker="picker" 
      @confirm="confirm1"
      :options="options"
    ></hbxw-selector>
    <hbxw-selector 
      v-model:isShow="isShowSlector2" 
      :options="reasonOptions"
      title="请选择售后原因"
      sub-title="售后原因副标题"
    >
      <template #close>
        <view class="close-icon" mode="aspectFill">✕</view>
      </template>
      <template #footer="{ result }">
        <view class="footer-container">
          <view @click="confirm2(result)" class="confirm-btn">
            确定
          </view>
        </view>
      </template>
    </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,
        reasonOptions: SELECT_OPTIONS,
                isShowSlector0: false,
                isShowSlector1: false,
        isShowSlector2: false
            }
        },
        methods: {
            picker(res) {
        console.log('---- picker ----:',  res);
      },
      confirm(res) {
        console.log('---- confirm ----:',  res);
      },
      selectfn(index) {
        this['isShowSlector'+index] = true;
      },
      confirm0(result) {
        console.log('---- confirm0 ----:', result);
        this.isShowSlector0 = false;
      },
      confirm1(result) {
        console.log('---- confirm1 ----:', result);
        this.isShowSlector1 = false;
      },
      confirm2(result) {
        console.log('---- confirm2 ----:', result);
        this.isShowSlector2 = false;
      }
    }
    }
</script>

<style>
.close-icon {
  width: 44rpx;
  height: 44rpx;
}

.select-icon {
  width: 30rpx;
  height: 30rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #C246EF, #6666EA);
  border-radius: 50%;
}

.select-iconin {
  color: white;
}

.select-icon-default {
  width: 30rpx;
  height: 30rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: white;
  border-width: 1px;
  border-style: solid;
  border-color: #D2CBD4;
  border-radius: 50%;
}

.footer-container {
  width: 750rpx;
  height: 160rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: white;
  box-shadow: 0px -12px 20px 0px rgba(203,203,207,0.35);
}

.confirm-btn {
  width: 694rpx;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #B34EE7, #6666E2);
  border-radius: 50rpx;
  font-size: 28rpx;
  color: white;
}
</style>

API

Props

Events

Slots

特性

• 🚀 高性能：优化渲染逻辑，避免微信小程序插槽冲突问题
• 🎨 可定制：支持自定义图标、底部操作区域、关闭按钮
• 📱 多端兼容：完美兼容微信小程序、H5、App等平台
• ✨ 动画效果：支持开关动画，提升用户体验
• 🔧 灵活配置：支持单选/多选、遮罩点击关闭等多种配置

注意事项

• 组件已经尽力向外暴露了一些自定义属性，但是面对形形色色的需求，如果通过已经暴露的配置我们无法满足需求，我们可以通过样式穿透去自定义UI，最暴力的是直接复制整个代码到自己的项目，完全自定义一个适合自已需求的
• 包体积偏大是因为有示例图片，真正会打包到项目中的体积是很小的