ElementUI el-popover弹框背景色设置

1.el-popover样式由于使用了 absolute 属性,导致脱离了节点,所以在父级元素使用class无法进行权重处理来修改其样式,解决方式如下:通过popper-class实现样式处理,避免全局样式污染

// html
<el-popover
      placement="right"
      popper-class="device-popover"
      width="130"
      trigger="click">
          <div>
               Devices with the same IP address as the user
          </div>
</el-popover>

//css 
.device-popover{
   background-color: #ffdf25 !important;
   border-color: #ffdf25 !important;
}
.device-popover .popper__arrow::after{
   border-right-color:#ffdf25 !important;
}

LogicFlow 是一个用于流程图编辑的前端架,它支持自定义扩展。如果你想在鼠标移入边(Edge)时出一个 el-popover ,可以通过监听鼠标事件并使用 Element UI 的 el-popover 组件来实现。 以下是一个基本的实现步骤: 1. 首先确保你的项目中已经安装并配置了 Element UI,并且已经引入了 el-popover 组件。 2. 在你的 LogicFlow 编辑器中,为边添加自定义属性或类名,以便于识别。 3. 使用 LogicFlow 提供的 `EdgeView` 相关的生命周期方法或事件监听函数,比如 `cell:mouseover` 或 `cell:mousedown`,来监听鼠标移入事件。 4. 在事件处理函数中,获取鼠标当前的坐标位置。 5. 基于获取的坐标位置,配置 el-popover 组件的相关属性,如 `ref`、`content`、`placement` 等,并触发的显示。 6. 当鼠标移出边时,确保关闭 el-popover 。 示例代码大致如下(请注意,这需要根据实际项目进行调整): ```javascript // 在 LogicFlow 实例化之后 lf.on('edge:mouseover', (data) => { const { x, y } = data.e; const { id } = data.edge; // 显示 popover this.$refs[id].showPopover(x, y); }); lf.on('edge:mouseout', (data) => { const { id } = data.edge; // 隐藏 popover this.$refs[id].hidePopover(); }); // 在 Element UI 中定义一个带 popover 的边 <el-popover ref="edge1" placement="top" width="200" :content="popoverContent" :trigger="trigger"> <div class="popover-edge"></div> </el-popover> ``` 请注意,这里提到的 `this.$refs[id].showPopover(x, y);` 和 `this.$refs[id].hidePopover();` 是示例中控制显示和隐藏的方法,具体实现需要根据你的项目情况编写。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值