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

本文主要是介绍element el-popover组件 查看示例图片功能实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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>

这篇关于element el-popover组件 查看示例图片功能实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---