关于前端:element-UI-多个元素共有一个popover-实现方法

42次阅读

共计 1083 个字符，预计需要花费 3 分钟才能阅读完成。

如果是列表循环，每一个元素有都有本人 popover，那咱们间接用 popover 循环即可，相似于：

// HTML
<el-popover
  v-for="tag in list"
  :key="tag.name"
  placement="top-start"
  title="题目"
  width="200"
  trigger="hover"
  :content="tag.type"
>
  <el-tag slot="reference">{{tag.name}}</el-tag>
</el-popover>

// JS

list: [{ name: "标签一", type: "normal"},
  {name: "标签二", type: "success"},
  {name: "标签三", type: "info"},
  {name: "标签四", type: "warning"},
  {name: "标签五", type: "danger"},
]

还有一种非列表循环的常见，两个或者多个不同的元素怎么共有一个 popover 呢，间接上代码

HTML

<el-button id="btn1" v-popover:popover @click="btnClick($event)"> 手动激活 1 </el-button>
<el-button id="btn2" v-popover:popover @click="btnClick($event)"> 手动激活 2 </el-button>

<el-popover
  ref="popover"
  placement="bottom"
  title="题目"
  width="200"
  trigger="manual"
  content="这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容。"
  v-model="visible"
>
</el-popover>

JS

data() {
  return {visible: false,]
  };
},
  methods: {btnClick(e) {
      // 外围代码
      this.visible = false;
      this.$refs.popover.doDestroy(true);
      this.$nextTick(() => {
        this.$refs.popover.referenceElm = e.target;
        this.visible = true;
      });
    },
  }

这个形式实用于 popover 自定义管制显示，通过 v-popover 指令绑定到须要触发 popover 的元素，