vue+iview tabs context-menu 彈出框修改樣式的方法
今天遇到一個(gè)需求說(shuō)頁(yè)面頂部的菜單右鍵彈出框離得有點(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)出來(lái)是這樣
首先打開控制臺(tái)，找到這個(gè)樣式是 ivu-dropdown-transfer
發(fā)現(xiàn)這個(gè)樣式是自帶了transfer
那么在style里面寫scoped 就不會(huì)生效，不寫的話是全局了又會(huì)影響其他地方下拉框
然后去官網(wǎng)找 transfer-class-name 發(fā)現(xiàn)tabs沒(méi)有這個(gè)選項(xiàng)
那只能在右鍵時(shí)候動(dò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找不到的好像和下拉框的樣式有沖突
然后全局寫一個(gè)樣式
<style>
.fixed-context-menu {
top: 97px !important;
}
</style>到此這篇關(guān)于vue+iview tabs context-menu 彈出框修改樣式的方法的文章就介紹到這了,更多相關(guān)vue+iview tabs context-menu 彈出框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能
這篇文章主要介紹了使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue3項(xiàng)目中的el-carousel 輪播圖的使用
Carousel（走馬燈）是一種常見(jiàn)的前端組件,通常用于展示多個(gè)項(xiàng)目（通常是圖片或內(nèi)容塊）的輪播效果,這篇文章主要介紹了vue3項(xiàng)目中的el-carousel 輪播圖的使用,需要的朋友可以參考下2024-02-02
vue中的diff算法時(shí)常是面試過(guò)程中的考點(diǎn),本文將為大家講解何為diff以及diff算法的實(shí)現(xiàn)過(guò)程,那么在了解diff之前,我們需要先了解虛擬DOM是什么,需要的朋友可以參考下2024-02-02
vue3如何解決各場(chǎng)景l(fā)oading過(guò)度(避免白屏尷尬!)
在開發(fā)的過(guò)程中點(diǎn)擊提交按鈕,或者是一些其它場(chǎng)景總會(huì)遇到loading加載,下面這篇文章主要給大家介紹了關(guān)于vue3如何解決各場(chǎng)景l(fā)oading過(guò)度的相關(guān)資料,避免白屏尷尬,需要的朋友可以參考下2023-03-03
詳解vue項(xiàng)目首頁(yè)加載速度優(yōu)化
這篇文章主要介紹了詳解vue項(xiàng)目首頁(yè)加載速度優(yōu)化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
Vue動(dòng)態(tài)類的幾種使用方法總結(jié)
這篇文章主要介紹了Vue動(dòng)態(tài)類的幾種使用方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
element-ui tree結(jié)構(gòu)實(shí)現(xiàn)增刪改自定義功能代碼
這篇文章主要介紹了element-ui tree結(jié)構(gòu)實(shí)現(xiàn)增刪改自定義功能代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue基于Element按鈕權(quán)限實(shí)現(xiàn)方案
這篇文章主要介紹了vue基于Element按鈕權(quán)限實(shí)現(xiàn)方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue+epubjs實(shí)現(xiàn)電子書閱讀器的基本功能
這篇文章主要為大家詳細(xì)介紹了如何使用vue+epubjs實(shí)現(xiàn)電子書閱讀器的基本功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
Vue實(shí)現(xiàn)table上下移動(dòng)功能示例
這篇文章主要介紹了Vue實(shí)現(xiàn)table上下移動(dòng)功能,結(jié)合實(shí)例形式分析了vue.js針對(duì)table表格元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02