element el-popover组件查看示例图片功能实现

最新推荐文章于 2024-10-10 15:32:11 发布

weixin_42220130

最新推荐文章于 2024-10-10 15:32:11 发布

阅读量342

点赞数 1

分类专栏： Element ui 文章标签： element el-popover 悬浮点击弹窗

本文链接：https://blog.csdn.net/weixin_42220130/article/details/141637338

版权

Element ui 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

el-popover查看示例图片

官网文档:element ui 用于vue2 和element plus 用于vue3
https://element.eleme.cn/#/zh-CN/component/popover
http://element-plus.org/zh-CN/component/popover.html

常见属性
在这里插入图片描述

在这里插入图片描述

<el-popover :width="400" trigger="hover" placement="right">
              <template #reference>
                <el-text class="ml30 mr10" type="primary" tag="ins">查看示例</el-text>
              </template>

              <el-image src="https://lvyou.xianguosuyuan.com/api/admin/sys-file/oss/file?fileName=9a63cf325865433ca9714d6929586cfb.png"></el-image>
            </el-popover>

未操作展示：
在这里插入图片描述
鼠标悬浮或点击后效果：显示图片和文字

如果查看示例需要满足条件才显示可加v-if判断条件，我这里是showPopover变量为true显示

<el-popover :width="400" trigger="hover" placement="right" v-if="showPopover">
              <template #reference>
                <el-text class="ml30 mr10" type="primary" tag="ins">查看示例</el-text>
              </template>

              <el-image src="https://lvyou.xianguosuyuan.com/api/admin/sys-file/oss/file?fileName=9a63cf325865433ca9714d6929586cfb.png"></el-image>
            </el-popover>