| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 | 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: [],    },    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);            }        },    },});
 |