## 介绍
向下弹出的菜单列表，支持二级分类选择。不依赖任何第三方插件，支持小程序、h5、app-vue。
注意: 仅支持vue3
### 基本用法
```
<template>
	<view class="content">
		<wei-dropdown-menu :data="menuData" @change="onChange" :value="menuValue" 
		:popupSytle="{ borderRadius: '0 0 10px 10px', overflow: 'hidden' }"></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)
		menuData.value = e.value;
	}
	
	function setValueChange() {
		menuValue.value = {
			city: ['1', '1_2'],
			sort: "2",
		};
	}

</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   |是否在点击遮罩层后关闭菜单|
|menuItemStyle      |Object        |{}   |每个菜单栏的样式设置,必须为对象|
|popupSytle      |Object        |{}   |下拉选择项弹出样式设置,必须为对象|
|@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