vue+iview tabs context-menu 弹出框怎么修改样式

今天遇到一个需求说页面顶部的菜单右键弹出框离得有点远

代码是这样

javascript 复制代码
<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>

表现出来是这样

首先打开控制台,找到这个样式是 ivu-dropdown-transfer

发现这个样式是自带了transfer

那么在style里面写scoped 就不会生效,不写的话是全局了又会影响其他地方下拉框

然后去官网找 transfer-class-name 发现tabs没有这个选项

那只能在右键时候动态往里添加了

@on-contextmenu="contextmenu"

javascript 复制代码
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找不到的好像和下拉框的样式有冲突

然后全局写一个样式

javascript 复制代码
<style>

.fixed-context-menu {

  top: 97px !important;

}

</style>
相关推荐
wordbaby5 分钟前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹9 分钟前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel16 分钟前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
wyzqhhhh31 分钟前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富37 分钟前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
土了个豆子的1 小时前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#
全栈技术负责人1 小时前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
老华带你飞1 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
xw51 小时前
移动端调试上篇
前端
@菜菜_达1 小时前
Lodash方法总结
开发语言·前端·javascript