vue + element插件Popover弹出框

零月§连芯@

已于 2024-09-12 22:24:37 修改

阅读量4.6k

点赞数 1

文章标签： vue css

于 2021-01-13 22:11:17 首次发布

本文链接：https://blog.csdn.net/qq_43531886/article/details/112593206

版权

本文介绍了如何在Vue项目中使用Element UI的Popover组件，包括通过自定义指令v-popover绑定和设置不同的触发方式如click，以及调整弹出框的位置和添加自定义类名来避免样式污染。重点强调了popper-class的使用技巧，需要为每个popover定义特定的class并遵循特定的命名规则以确保样式生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一使用自定义指令v-popover指向 Popover 的索引ref

<el-popover
      ref="popover1"
      width="200"
      trigger="click"
      placement="top"
      content="这是一段内容1">
    </el-popover>
    <el-button v-popover:popover1>click 激活1</el-button>


    <el-popover
      ref="popover2"
      width="200"
      trigger="click"
      placement="top"
      content="这是一段内容2.">
    </el-popover>
    <el-button v-popover:popover2>click 激活2</el-button>

方法二
在这里插入图片描述

<el-popover
    placement="top"
    width="200"
    trigger="click"
    content="这是一段内容1。">
    <el-button slot="reference">click  激活1</el-button>
  </el-popover>
  <el-popover
    placement="top"
    width="200"
    trigger="click"
    content="这是一段内容2。">
    <el-button slot="reference">click  激活2</el-button>
  </el-popover>

placement=“bottom” placement 出现位置可选 top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end

trigger=“click” trigger 属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。

popper-class 为 popper 添加类名 el-popover 生成的div 不在App.vue组件的div内，与App.vue组件的div平级，需要设置全局style.
为了防止全局样式污染 针对每一个popover-class 设置样式即可
注意：1.使用popper-class 定义样式信息，2.创建对应的css的class .el-popover.my-class 这种格式，前缀是.el-popover ，不然不生效。

  .el-popover.popper1{
    color: #42b983;
  }
  .el-popover.popper2{
    color:red;
  }