Element Plus el-tooltip嵌套el-popover

最新推荐文章于 2024-05-27 14:21:47 发布

不会敲代码。

最新推荐文章于 2024-05-27 14:21:47 发布

阅读量1.4k

点赞数 5

分类专栏： Element Plus 文章标签： elementui

本文链接：https://blog.csdn.net/weixin_43220182/article/details/131383740

版权

Element Plus 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、场景

需求在按钮中鼠标移入显示Tooltip文字提示,点击显示Popover提示框

二、实现

<template>
  <el-tooltip effect="dark" content="删除" placement="top-start">
    <!-- 重要 -->
    <span>
      <el-popover
        placement="bottom-start"
        trigger="click"
        width="200"
        v-model:visible="visible"
      >
        <p>确认删除吗?</p>
        <div style="text-align: right; margin: 0">
          <el-button size="small" text @click="visible = false">取消</el-button>
          <el-button size="small" type="primary" @click="visible = false"
            >确认</el-button
          >
        </div>
        <template #reference>
          <!-- 触发源 -->
          <el-button type="danger" icon="Delete" plain></el-button>
        </template> </el-popover
    ></span>
  </el-tooltip>
</template>

<script setup lang="ts">
import { ref } from "vue";
const visible = ref(false);
</script>

<style scoped></style>