欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

代碼是這樣

<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">關閉其他</span>
          </DropdownItem>
          <DropdownItem @click.native="handleCloseTag('closeAll')">
            <Icon type="ios-close-circle-outline"></Icon>
            <span class="dropdown-icon-space">關閉所有</span>
          </DropdownItem>
        </template>
      </Tabs>

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

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

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

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

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

那只能在右鍵時候動態(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>

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

相關文章

最新評論