当前位置： 首页 > news >正文

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

news 来源：原创 2024/9/20 9:29:04

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>

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 【记录】基于Windows系统安装rust环境的过程
  • [报错] nvcc -V 找不到
  • vue3中批量下载文件（压缩包）功能
  • Linux学习之路 -- systemV进程通信 -- 消息队列和信号量（简单介绍）
  • ssrf实现
  • springboot+vue+mybatis计算机毕业设计电子产品交易系统+PPT+论文+讲解+售后
  • iview checkbox单独使用时 如何去掉显示的true和false以及不显示文字
  • VBA技术资料MF180：将某个文件夹中的某类图片导入Word
  • sqlite blob 数据检索（基于sqlite3_get_table的优化）
  • 如何使用Gitee管理自己的项目
  • 【自由能系列（初级）】自由能原理——神经科学的“能量守恒”方程
  • 惠海H6900B升压恒流调光IC芯片3.7V7.4V12V升压18V24V36V 48V 植物灯/电解水
  • 娱乐社交、游戏等行业共探合规前提下，实现产品可持续的增长与营收 | 网易数智x华为云泛娱乐行业沙龙-杭州站邀您前来！
  • 学苑教育杂志社学苑教育编辑部学苑教育杂志2024年第23期目录
  • 解决有向图中节点出度和入度计算问题
  • [iOS]Core Data浅析一 -- 启用Core Data
  • 【407天】跃迁之路——程序员高效学习方法论探索系列（实验阶段164-2018.03.19）...
  • - C#编程大幅提高OUTLOOK的邮件搜索能力!
  • emacs初体验
  • Git 使用集
  • go append函数以及写入
  • IDEA常用插件整理
  • JSONP原理
  • MySQL常见的两种存储引擎：MyISAM与InnoDB的爱恨情仇
  • Rancher如何对接Ceph-RBD块存储
  • VUE es6技巧写法（持续更新中~~~）
  • Vue学习第二天
  • Webpack4 学习笔记 - 01：webpack的安装和简单配置
  • 嵌入式文件系统
  • 深入 Nginx 之配置篇
  • 手写一个CommonJS打包工具（一）
  • 思维导图—你不知道的JavaScript中卷
  • 我感觉这是史上最牛的防sql注入方法类
  • 移动端 h5开发相关内容总结(三)
  • 云大使推广中的常见热门问题
  • 运行时添加log4j2的appender
  • d²y/dx²； 偏导数问题 请问f1 f2是什么意思
  • mysql 慢查询分析工具：pt-query-digest 在mac 上的安装使用 ...
  • ​创新驱动，边缘计算领袖：亚马逊云科技海外服务器服务再进化
  • #define与typedef区别
  • $.extend({},旧的,新的)；合并对象，后面的覆盖前面的
  • （k8s）Kubernetes本地存储接入
  • （二）基于wpr_simulation 的Ros机器人运动控制，gazebo仿真
  • （二刷）代码随想录第15天|层序遍历 226.翻转二叉树 101.对称二叉树2
  • （附源码）基于ssm的模具配件账单管理系统 毕业设计 081848
  • (生成器)yield与(迭代器)generator
  • (数位dp) 算法竞赛入门到进阶 书本题集
  • (图)IntelliTrace Tools 跟踪云端程序
  • （一）Thymeleaf用法——Thymeleaf简介
  • (一）使用Mybatis实现在student数据库中插入一个学生信息
  • (中等) HDU 4370 0 or 1，建模+Dijkstra。
  • （转）memcache、redis缓存
  • *_zh_CN.properties 国际化资源文件 struts 防乱码等
  • .bat批处理出现中文乱码的情况
  • .NET HttpWebRequest、WebClient、HttpClient