更新记录

1.0.4(2023-10-12)

修复改变选择项不成功问题

1.0.3(2023-07-07)

增加一些样式配置

1.0.2(2023-07-07)

解决一些bug

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.8.7 app-vue × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

介绍

向下弹出的菜单列表,支持二级分类选择。不依赖任何第三方插件,支持小程序、h5、app-vue。 注意: 仅支持vue3

基本用法

<template>
    <view class="content">
        <wei-dropdown-menu :data="menuData" @change="" :value="menuValue"></wei-dropdown-menu>
        <view class="action-btns">
            <button @tap="setValueChange" type="primary">手动触发值改变</button>
        </view>
    </view>
</template>

<script setup>
    import { ref } from "vue";
    import { menuData } from './data.js';

    const menuValue = ref({});

    function (e) {
        console.log('↓↓↓↓触发change事件↓↓↓↓')
        console.log(e)
    }
</script>

属性/事件说明

属性名 类型 默认值 说明
value Object {} 传递给组件的值,不支持双向绑定,可以通过监听change自己实现双向绑定
data Array [] 整个菜单栏的下拉选择的数据,必填,具体看下面说明
activeColor String #1989fa 菜单标题和选项的选中态颜色
z-index Number 10 菜单栏 z-index 层级
duration Number .2 动画时长,单位秒,设置为 0 可以禁用动画
overlay Boolean true 是否显示遮罩层
close-on-click-overlay Boolean true 是否在点击遮罩层后关闭菜单
@change Function 当菜单的值改变触发的事件,e = { item: Object, value: Object }

属性 Data

Data 属性必须为数组,数组每一项的配置如下

属性名 类型 默认值 说明
name String null 必填,每栏菜单项的唯一标识,也就是组件value值的key
title String null 必填,每栏菜单显示的标题
options Array null 必填,下拉菜单的选择项,格式 { label:"xxx", value:"xxx", tip: "显示在最右边的提示" }
treeSelect Boolean false 是否为二级分类选择, 如果是,options需要有children字段
popupHeight String null 弹出选择菜单的高度,如果为空,则会自适应选项高度, 必须带单位
menuWidth String null 每项菜单栏的宽度,为空自适应,必须带单位

后期继续完善的功能

  • [ ] 增加出更多样式配置
  • [ ] 兼容nvue

隐私、权限声明

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

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

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

许可协议

MIT协议

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