Vue-鼠标悬浮在缩略图图片上，弹出原图

于 2024-04-14 09:04:06 发布
阅读量722 收藏
点赞数 18
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhourongxiang1/article/details/137735013
版权

在这里插入图片描述
使用Popover 弹出框实现

<template>
    <div>
        <el-popover
  placement="right"
  width="400"
  trigger="hover">
  
  <img src="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100" alt="">
  <img slot="reference" src="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100" width="300" height="300" alt="">
</el-popover>
    </div>
</template>
太空漫步11
关注
  • 18
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
弹出框显示图片轮播
02-19
弹出框显示图片轮播，当你想要图片在弹出框，显示，并且可以切换，这个特效无疑可以用。
解决vue-photo-preview 异步图片放大失效的问题
10-15
在Vue.js开发过程中，我们经常需要使用图片预览功能，而`vue-photo-preview`是一个常用的图片预览插件。然而，当处理异步加载的图片时，可能会遇到图片放大失效的问题。本文将详细探讨这个问题，并提供解决方案。 ...
Vue实现鼠标悬浮隐藏与显示图片效果 @mouseenter 和 @mouseleave事件
热门推荐
吕氏春秋i
09-08 1万+
前端vue 有个功能是鼠标移动到指定item上显示出来一个编辑和删除的图标鼠标悬停在列表那么需要有悬浮显示的列表编辑和删除icon文字不好描述，因为是web端录屏也比较麻烦 这里用截图说明学习之路 永无止步记录当下，保持一颗向上的心态~!
vue照片悬浮
m0_74828356的博客
08-17 227
使用el-popover模块。
在vue项目中鼠标悬浮图片实现hover功能
qq_43474235的博客
04-17 5944
在vue项目中实现滑入滑出的功能
使用vue 鼠标悬停展示图片
qq_45763682的博客
01-30 575
鼠标展示图片
鼠标悬停图片上，显示另一张图片
m0_57717237的博客
06-28 1999
4.对第一张照片设置div:hover>img:first-child{display: none;5.对第二张照片设置div:hover>img:last-child{display: block;2.我们目的是想要第一张照片正常显示在页面，想要第二张照片在鼠标移动到第一张照片上显示出来。这个代码的意思就是当鼠标光标移动到这个div上时，不让第一张照片显示。这个代码的意思就是当鼠标光标移动到这个div上时，让第二张照片显示。意思就是不将鼠标光标移动到第一张照片上时，不让第二张照片显示。
vue图片点击预览
weixin_43909743的博客
08-09 3798
前言 起因：关于聊天框图片点击查看的实现，不如记下，以后好复用 手写实现 在父组件引入并且传值 // 父组件 <preview :previewImg="companyPreview"></preview> // 引入 import preview from "./preview.vue" // components中注册 components:{preview}, // 传递的参数 companyPreview:{ imgList: [], // 所有图片数组 in
Vue.js鼠标悬浮更换图片功能
10-19
主要为大家详细介绍了Vue.js实现鼠标悬浮更换图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于vue-upload-component封装一个图片上传组件的示例
10-17
主要介绍了基于vue-upload-component封装一个图片上传组件的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中element-ui表格缩略图悬浮放大功能的实例代码
08-27
element-ui界面非常简洁和美观，提供的组件可以满足绝大多数的应用场景，当表格中显示了图片的缩略图时，想要鼠标浮动在缩略图上时放大图片的效果，该如何实现呢？下面小编通过实例代码给大家介绍vue中element-ui...
vue-quill-editor实现图片上传功能
08-29
在项目中，使用 Vue-Quill-Editor 作为富文本编辑器时，需要将图片上传到服务器，然后将图片 URL 插入到文本中。这是因为，如果直接将图片转换为 base64 字符串，然后将其插入到文本中，這将会产生一个问题：当图片...
element table组件实现鼠标移入hover展示图片大图功能——Popover 弹出框组件的使用
yehaocheng520的博客
05-24 4601
使用场景： element-ui中，在使用table组件时，有个缩略图的字段，鼠标移入时（hover）可以展示图片的预览图，效果如下： hover或者click时，需要展示其他内容，则可以通过：Popover 弹出框 popover弹出框官网链接：https://element.eleme.cn/#/zh-CN/component/popover Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的 trigger属性用于设置何时触发 Popover，支持四种触发方式：
在Vue表格里写入一个缩略图，并且点击缩略图时，弹出窗口会显示对应的大图
最新发布
m0_51160509的博客
01-10 791
我们添加了一个 `` 组件作为弹出窗口，并使用一个 `dialogVisible` 属性来控制弹窗的显示与隐藏。 当用户点击缩略图时，我们将对应的大图的路由传递给 `showDialog()` 方法，该方法会将 `dialogVisible` 属性设为 `true`，并将 `dialogImageUrl` 属性设置为要显示的大图的路由。 同时，我们在 `` 上绑定了 `@click` 事件，当点击缩略图时会调用 `showDialog()` 方法。 这样，当用
vue3+element plus图片预览点击按钮直接显示图片的预览形式
this_zq的博客
11-21 2152
不同的是，这里element plus并没有给出实际样例，只是用文字描述了下，咱就是说，家人们，这坑不坑，我还是看了别人的博客才知道这块的用处>_
vue 模态框 el-dialog 实现点击图片查看大图功能
@必意玲
08-14 6319
<!-- 图片查看dialog --> <img :src="item.content" class="avatar" @click="imgViewDialog_show(item)" /> <el-dialog title :visible.sync="imgViewDialogVisible" class="imgView-dialog" :modal="fa...
vue结合el-image实现点击按钮图片预览效果
qq_39536826的博客
09-07 1619
vue结合el-image实现点击按钮图片预览效果
vue实现弹窗（配图）
qq_38215042的博客
03-25 8740
<template> <el-container> <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog :visible.sync="dialogVisible" width="50%" sty...
el-upload 鼠标悬浮 预览png
08-26
el-upload 是一个基于 Element UI 的上传组件，用于实现文件上传功能。鼠标悬浮预览 PNG 图片可以通过设置 el-upload 的属性和事件来实现。 首先，需要在 el-upload 中设置 accept 属性为 "image/png"，这样可以限制用户只能选择上传 PNG 格式的文件。 其次，使用 slot 插槽来自定义 el-upload 组件的内容，例如： ``` <el-upload accept="image/png" > <i class="el-icon-plus"></i> <div class="el-upload__text">将文件拖到此处，或点击上传</div> <div slot="tip" class="el-upload__tip">只能上传 PNG 格式的图片</div> </el-upload> ``` 然后，在 el-upload 上监听 file-list-change 事件来获取文件列表，并通过遍历 fileList 中的文件来判断是否为 PNG 图片。对于 PNG 图片，可以使用 FileReader 对象读取文件内容，然后在悬浮时展示预览效果。 ``` <el-upload accept="image/png" @file-list-change="handleFileListChange" > ... </el-upload> ``` ``` methods: { handleFileListChange(fileList) { fileList.forEach(file => { if (file.type === 'image/png') { const reader = new FileReader(); reader.readAsDataURL(file.raw); reader.onload = () => { // 使用 reader.result 来展示预览效果 }; } }); } } ``` 在预览效果中，可以使用 img 标签的 src 属性绑定 reader.result 来展示 PNG 图片的预览效果。 综上所述，我们可以通过设置 accept 属性为 "image/png"，使用 slot 插槽自定义文件上传组件的内容，监听 file-list-change 事件来获取文件列表，使用 FileReader 对象读取 PNG 图片的内容，并通过预览效果来展示 PNG 图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值