亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue+iview tabs context-menu 彈出框修改樣式的方法

 更新時間：2024年06月09日 11:19:24   作者：代碼老祖  
今天遇到一個需求說頁面頂部的菜單右鍵彈出框離得有點(diǎn)遠(yuǎn),需要我們做調(diào)整,下面小編給大家分享下vue+iview tabs context-menu 彈出框修改樣式的方法,感興趣的朋友跟隨小編一起看看吧

今天遇到一個需求說頁面頂部的菜單右鍵彈出框離得有點(diǎn)遠(yuǎn)

代碼是這樣

<Tabs type="card" closable class="main-tags-col-tabs" 
      v-model="activeTab" @on-click="handleClickTag" 
:before-remove="handleBeforeRemove" 
capture-focus @on-contextmenu="contextmenu">
        <TabPane
          v-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">關(guān)閉其他</span>
          </DropdownItem>
          <DropdownItem @click.native="handleCloseTag('closeAll')">
            <Icon type="ios-close-circle-outline"></Icon>
            <span class="dropdown-icon-space">關(guān)閉所有</span>
          </DropdownItem>
        </template>
      </Tabs>

表現(xiàn)出來是這樣

首先打開控制臺，找到這個樣式是   ivu-dropdown-transfer

發(fā)現(xiàn)這個樣式是自帶了transfer

那么在style里面寫scoped  就不會生效，不寫的話是全局了又會影響其他地方下拉框

然后去官網(wǎng)找  transfer-class-name   發(fā)現(xiàn)tabs沒有這個選項(xiàng)

那只能在右鍵時候動態(tài)往里添加了

 @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>

到此這篇關(guān)于vue+iview tabs context-menu 彈出框修改樣式的方法的文章就介紹到這了,更多相關(guān)vue+iview tabs context-menu 彈出框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論