今天遇到一個需求說頁面頂部的菜單右鍵彈出框離得有點遠
代碼是這樣
<Tabs type="card" closable class="main-tags-col-tabs" v-model="activeTab" @on-click="handleClickTag"
:before-remove="handleBeforeRemove"
capture-focus @on-contextmenu="contextmenu"><TabPanev-for="(item, index) in tagList":key="index":name="item.name":label="item.label"icon="custom iconfont icon-dot-circle":closable="index != 0":context-menu="index == 0 ? false : true"></TabPane><template slot="contextMenu"><DropdownItem @click.native="handleCloseTag('closeOther')"><Icon type="md-close"></Icon><span class="dropdown-icon-space">關閉其他</span></DropdownItem><DropdownItem @click.native="handleCloseTag('closeAll')"><Icon type="ios-close-circle-outline"></Icon><span class="dropdown-icon-space">關閉所有</span></DropdownItem></template></Tabs>表現出來是這樣
首先打開控制臺，找到這個樣式是? ?ivu-dropdown-transfer
發現這個樣式是自帶了transfer
那么在style里面寫scoped? 就不會生效，不寫的話是全局了又會影響其他地方下拉框
然后去官網找? transfer-class-name? ?發現tabs沒有這個選項
那只能在右鍵時候動態往里添加了
?@on-contextmenu="contextmenu"
contextmenu(item) {this.$nextTick(() => {const dropdownMenu = document.querySelector('.ivu-dropdown-transfer')console.log(dropdownMenu)if (dropdownMenu) {dropdownMenu.classList.add('fixed-context-menu')}})this.contextMenuActiveName = item.name},?ivu-dropdown-transfer? 這里注意ivu-select-dropdown找不到的好像和下拉框的樣式有沖突
然后全局寫一個樣式
<style>.fixed-context-menu {top: 97px !important;}</style>
