更新记录
1.0.4(2023-10-12)
下载此版本
修复改变选择项不成功问题
1.0.3(2023-07-07)
下载此版本
增加一些样式配置
1.0.2(2023-07-07)
下载此版本
解决一些bug
查看更多
平台兼容性
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="onChange" :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 onChange(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 |
每项菜单栏的宽度,为空自适应,必须带单位 |
后期继续完善的功能