ruoyi-miniapp/wxcomponents/vant/dropdown-menu/index.js

import {
	VantComponent
} from '../common/component';
import {
	useChildren
} from '../common/relation';
import {
	addUnit,
	getRect,
	getSystemInfoSync
} from '../common/utils';
let ARRAY = [];
VantComponent({
	field: true,
	classes: ['title-class'],
	relation: useChildren('dropdown-item', function() {
		this.updateItemListData();
	}),
	props: {
		activeColor: {
			type: String,
			observer: 'updateChildrenData',
		},
		overlay: {
			type: Boolean,
			value: true,
			observer: 'updateChildrenData',
		},
		zIndex: {
			type: Number,
			value: 10,
		},
		duration: {
			type: Number,
			value: 200,
			observer: 'updateChildrenData',
		},
		direction: {
			type: String,
			value: 'down',
			observer: 'updateChildrenData',
		},
		safeAreaTabBar: {
			type: Boolean,
			value: false,
		},
		closeOnClickOverlay: {
			type: Boolean,
			value: true,
			observer: 'updateChildrenData',
		},
		closeOnClickOutside: {
			type: Boolean,
			value: true,
		},
	},
	data: {
		itemListData: [],
		currentValue: ''
	},
	beforeCreate() {
		const {
			windowHeight
		} = getSystemInfoSync();
		this.windowHeight = windowHeight;
		ARRAY.push(this);
	},
	destroyed() {
		ARRAY = ARRAY.filter((item) => item !== this);
	},
	methods: {
		updateItemListData() {
			this.setData({
				itemListData: this.children.map((child) => child.data),
			});
		},
		updateChildrenData() {
			this.children.forEach((child) => {
				child.updateDataFromParent();
			});
		},
		toggleItem(active) {
			this.children.forEach((item, index) => {
				const {
					showPopup
				} = item.data;
				if (index === active) {
					item.toggle();
				} else if (showPopup) {
					item.toggle(false, {
						immediate: true
					});
				}
			});
		},
		close() {
			this.children.forEach((child) => {
				child.toggle(false, {
					immediate: true
				});
			});
		},
		getChildWrapperStyle() {
			const {
				zIndex,
				direction
			} = this.data;
			return getRect(this, '.van-dropdown-menu').then((rect) => {
				const {
					top = 0, bottom = 0
				} = rect;
				const offset = direction === 'down' ? bottom : this.windowHeight - top;
				let wrapperStyle = `z-index: ${zIndex};`;
				if (direction === 'down') {
					wrapperStyle += `top: ${addUnit(offset)};`;
				} else {
					wrapperStyle += `bottom: ${addUnit(offset)};`;
				}
				return wrapperStyle;
			});
		},
		onTitleTap(event) {
			const {
				index
			} = event.currentTarget.dataset;
			const child = this.children[index];
			if (!child.data.disabled) {
				ARRAY.forEach((menuItem) => {
					if (menuItem &&
						menuItem.data.closeOnClickOutside &&
						menuItem !== this) {
						menuItem.close();
					}
				});
				this.toggleItem(index);
			}
		},
	},
});