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.
157 lines
2.8 KiB
157 lines
2.8 KiB
import { |
|
useParent |
|
} from '../common/relation'; |
|
import { |
|
VantComponent |
|
} from '../common/component'; |
|
VantComponent({ |
|
classes: ['item-title-class'], |
|
field: true, |
|
relation: useParent('dropdown-menu', function() { |
|
this.updateDataFromParent(); |
|
}), |
|
props: { |
|
value: { |
|
type: null, |
|
observer: 'rerender', |
|
}, |
|
title: { |
|
type: String, |
|
observer: 'rerender', |
|
}, |
|
disabled: Boolean, |
|
titleClass: { |
|
type: String, |
|
observer: 'rerender', |
|
}, |
|
options: { |
|
type: Array, |
|
value: [], |
|
observer: 'rerender', |
|
}, |
|
popupStyle: String, |
|
useBeforeToggle: { |
|
type: Boolean, |
|
value: false, |
|
}, |
|
rootPortal: { |
|
type: Boolean, |
|
value: false, |
|
}, |
|
}, |
|
data: { |
|
transition: true, |
|
showPopup: false, |
|
showWrapper: false, |
|
displayTitle: '', |
|
safeAreaTabBar: false, |
|
}, |
|
methods: { |
|
rerender() { |
|
wx.nextTick(() => { |
|
var _a; |
|
(_a = this.parent) === null || _a === void 0 ? void 0 : _a.updateItemListData(); |
|
}); |
|
}, |
|
updateDataFromParent() { |
|
if (this.parent) { |
|
const { |
|
overlay, |
|
duration, |
|
activeColor, |
|
closeOnClickOverlay, |
|
direction, |
|
safeAreaTabBar, |
|
} = this.parent.data; |
|
this.setData({ |
|
overlay, |
|
duration, |
|
activeColor, |
|
closeOnClickOverlay, |
|
direction, |
|
safeAreaTabBar, |
|
}); |
|
} |
|
}, |
|
onOpen() { |
|
this.$emit('open'); |
|
}, |
|
onOpened() { |
|
this.$emit('opened'); |
|
}, |
|
onClose() { |
|
this.$emit('close'); |
|
}, |
|
onClosed() { |
|
this.$emit('closed'); |
|
this.setData({ |
|
showWrapper: false |
|
}); |
|
}, |
|
onOptionTap(event) { |
|
const { |
|
option |
|
} = event.currentTarget.dataset; |
|
const { |
|
value |
|
} = option; |
|
const shouldEmitChange = this.data.value !== value; |
|
this.setData({ |
|
showPopup: false, |
|
value |
|
}); |
|
this.$emit('close'); |
|
this.rerender(); |
|
if (shouldEmitChange) { |
|
this.$emit('change', value); |
|
} |
|
}, |
|
toggle(show, options = {}) { |
|
const { |
|
showPopup |
|
} = this.data; |
|
if (typeof show !== 'boolean') { |
|
show = !showPopup; |
|
} |
|
if (show === showPopup) { |
|
return; |
|
} |
|
this.onBeforeToggle(show).then((status) => { |
|
var _a; |
|
if (!status) { |
|
return; |
|
} |
|
this.setData({ |
|
transition: !options.immediate, |
|
showPopup: show, |
|
}); |
|
if (show) { |
|
(_a = this.parent) === null || _a === void 0 ? void 0 : _a.getChildWrapperStyle().then(( |
|
wrapperStyle) => { |
|
this.setData({ |
|
wrapperStyle, |
|
showWrapper: true |
|
}); |
|
this.rerender(); |
|
}); |
|
} else { |
|
this.rerender(); |
|
} |
|
}); |
|
}, |
|
onBeforeToggle(status) { |
|
const { |
|
useBeforeToggle |
|
} = this.data; |
|
if (!useBeforeToggle) { |
|
return Promise.resolve(true); |
|
} |
|
return new Promise((resolve) => { |
|
this.$emit('before-toggle', { |
|
status, |
|
callback: (value) => resolve(value), |
|
}); |
|
}); |
|
}, |
|
}, |
|
}); |