Element Plus el-tooltip嵌套el-popover

最新推荐文章于 2025-03-06 13:03:32 发布

不会敲代码。

最新推荐文章于 2025-03-06 13:03:32 发布

阅读量2.2k

点赞数 9

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

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

版权

Element Plus 专栏收录该内容

1 篇文章

订阅专栏

该文章展示了如何在Vue应用中使用El-tooltip和El-popover组件，实现鼠标悬停显示Tooltip文字提示，以及点击按钮弹出Popover确认删除的对话框。通过设置不同的属性如effect、placement、trigger，实现了交互功能。

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

一、场景

需求在按钮中鼠标移入显示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>