You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
2.8 KiB
119 lines
2.8 KiB
import { VantComponent } from '../common/component';
|
|
import { addUnit, getRect, getSystemInfoSync } from '../common/utils';
|
|
let ARRAY = [];
|
|
VantComponent({
|
|
field: true,
|
|
relation: {
|
|
name: 'dropdown-item',
|
|
type: 'descendant',
|
|
current: 'dropdown-menu',
|
|
linked() {
|
|
this.updateItemListData();
|
|
},
|
|
unlinked() {
|
|
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',
|
|
},
|
|
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);
|
|
}
|
|
},
|
|
},
|
|
});
|