diff --git a/packages/dropdown/src/dropdown-menu.vue b/packages/dropdown/src/dropdown-menu.vue index 1b64892bbbe..1766467423d 100644 --- a/packages/dropdown/src/dropdown-menu.vue +++ b/packages/dropdown/src/dropdown-menu.vue @@ -44,8 +44,11 @@ }, mounted() { - this.$parent.popperElm = this.popperElm = this.$el; - this.referenceElm = this.$parent.$el; + this.dropdown.popperElm = this.popperElm = this.$el; + this.referenceElm = this.dropdown.$el; + // compatible with 2.6 new v-slot syntax + // issue link https://github.com/ElemeFE/element/issues/14345 + this.dropdown.initDomOperation(); }, watch: { diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue index 2daa5503006..edbe197ae19 100644 --- a/packages/dropdown/src/dropdown.vue +++ b/packages/dropdown/src/dropdown.vue @@ -79,8 +79,6 @@ mounted() { this.$on('menu-item-click', this.handleMenuItemClick); - this.initEvent(); - this.initAria(); }, watch: { @@ -145,7 +143,6 @@ } else if ([9, 27].indexOf(keyCode) > -1) { // tab || esc this.hide(); } - return; }, handleItemKeyDown(ev) { const keyCode = ev.keyCode; @@ -174,7 +171,6 @@ this.hide(); this.triggerElm.focus(); } - return; }, resetTabindex(ele) { // 下次tab时组件聚焦元素 this.removeTabindex(); @@ -190,8 +186,6 @@ this.dropdownElm.setAttribute('id', this.listId); this.triggerElm.setAttribute('aria-haspopup', 'list'); this.triggerElm.setAttribute('aria-controls', this.listId); - this.menuItems = this.dropdownElm.querySelectorAll("[tabindex='-1']"); - this.menuItemsArray = Array.prototype.slice.call(this.menuItems); if (!this.splitButton) { // 自定义 this.triggerElm.setAttribute('role', 'button'); @@ -205,7 +199,7 @@ ? this.$refs.trigger.$el : this.$slots.default[0].elm; - let dropdownElm = this.dropdownElm = this.$slots.dropdown[0].elm; + let dropdownElm = this.dropdownElm; this.triggerElm.addEventListener('keydown', handleTriggerKeyDown); // triggerElm keydown dropdownElm.addEventListener('keydown', handleItemKeyDown, true); // item keydown @@ -238,6 +232,14 @@ }, focus() { this.triggerElm.focus && this.triggerElm.focus(); + }, + initDomOperation() { + this.dropdownElm = this.popperElm; + this.menuItems = this.dropdownElm.querySelectorAll("[tabindex='-1']"); + this.menuItemsArray = [].slice.call(this.menuItems); + + this.initEvent(); + this.initAria(); } },