diff --git a/src/components/JMultipleDatePicker.vue b/src/components/JMultipleDatePicker.vue index 31d47ff1..3e7a2a52 100644 --- a/src/components/JMultipleDatePicker.vue +++ b/src/components/JMultipleDatePicker.vue @@ -6,7 +6,6 @@ :ref="fieldName" :dropdownClassName="'j-multiple-date-picker ' + fieldName + '-drop'" @openChange="handleOpenChange" - :getCalendarContainer="(trigger) => trigger.parentNode" style="width: 100%" v-bind="$attrs" > @@ -57,9 +56,28 @@ export default { console.log(open) if (open) { this.open = open - setTimeout(() => { - document.getElementsByClassName(this.fieldName + '-drop')[0].children[0].children[0].children[0].children[0].children[0].value = this.checkedValue.join(',') - }, 100) + this.$nextTick(() => { + // 为了固定弹出层,把弹出层dom元素移动 + const drop = document.getElementsByClassName(this.fieldName + '-drop')[0] + const picker = document.getElementById(this.fieldName) + // 创建第二层外层元素 + const outerWrapperTwo = document.createElement('div') + outerWrapperTwo.appendChild(drop) + // 创建新的外层元素 + const outerWrapper = document.createElement('div') + outerWrapper.style.position = 'absolute' + outerWrapper.style.top = '0px' + outerWrapper.style.left = '0px' + outerWrapper.style.width = '100%' + outerWrapper.appendChild(outerWrapperTwo) + picker.appendChild(outerWrapper) + this.$nextTick(() => { + document.getElementsByClassName(this.fieldName + '-drop')[0].children[0].children[0].children[0].children[0].children[0].value = this.checkedValue.join(',') + }) + }) + // setTimeout(() => { + // document.getElementsByClassName(this.fieldName + '-drop')[0].children[0].children[0].children[0].children[0].children[0].value = this.checkedValue.join(',') + // }, 100) } else { this.open = open this.$nextTick(() => {