yitisheng-mini-app/uni_modules/wei-dropdown-menu/readme.md

介绍

向下弹出的菜单列表，支持二级分类选择。不依赖任何第三方插件，支持小程序、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