vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue   ElementUI图片点击放大

Vue + ElementUI表格内实现图片点击放大效果的两种实现方式

作者:思凡念真

这篇文章主要介绍了Vue + ElementUI表格内实现图片点击放大效果的两种实现方式,第一种使用el-popover弹出框来实现而第二种使用v-viewer插件实现,需要的朋友可以参考下

方式一:使用el-popover弹出框

trigger属性用于设置何时触发Popover(弹出框)属性值有:hover、click、focus 和 manual

style="cursor:pointer":当鼠标放上去时让img标签出现小手状态

<el-table-column label="物品图片" header-align="center" align="center">
  <template slot-scope="scope">
    <el-popover placement="top-start" trigger="click"> <!--trigger属性值:hover、click、focus 和 manual-->
      <a :href="scope.row.goodsImg" rel="external nofollow"  target="_blank" title="查看最大化图片">
        <img :src="scope.row.goodsImg" style="width: 300px;height: 300px">
      </a>
      <img slot="reference" :src="scope.row.goodsImg" style="width: 50px;height: 50px; cursor:pointer">
    </el-popover>
  </template>
</el-table-column>

方式二:使用v-viewer插件

一、安装依赖:在项目目录文件中进入安装

npm install v-viewer --save

二、全局引入:在项目目录下 ——> src文件夹下 ——> main.js进行全局引入

import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: {
    'inline': true,
    'button': true,
    'navbar': true,
    'title': true,
    'toolbar': true,
    'tooltip': true,
    'movable': true,
    'zoomable': true,
    'rotatable': true,
    'scalable': true,
    'transition': true,
    'fullscreen': true,
    'keyboard': true,
    'url': 'data-source'
  }
})

三、使用:在想要的组件中进行使用

单张图片方式

<viewer>
  <img
    :src="scope.row.goodsImg"
    style="width: 50px;height: 50px; cursor:pointer">
</viewer>
// 或
<div v-viewer>
  <img
    :src="scope.row.goodsImg"
    style="width: 50px;height: 50px; cursor:pointer">
</div>

多张图片方式

<div>
  <viewer :images="signImages">
    <!-- signImages一定要一个数组,否则报错 -->
    <img
      v-for="(src,index) in signImages"
      :src="src"
      :key="index"
      width="50">
  </viewer>
</div>
<!-- signImages数组放在 export default ——> data() ——> return 里面 -->
signImages: [
  'https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=3d9fc10fa3014c08063b2ea53a7a025b/359b033b5bb5c9eac1754f45df39b6003bf3b396.jpg',
  'https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg',
  'https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=7ecc7f20ae0f4bfb93d09854334e788f/10dfa9ec8a1363279e1ed28c9b8fa0ec09fac79a.jpg'
],

说明:

名称默认值说明
inlinefalse启用 inline 模式
buttontrue显示右上角关闭按钮
navbartrue显示缩略图导航
titletrue显示当前图片的标题
toolbartrue显示工具栏
tooltiptrue显示缩放百分比
movabletrue图片是否可移动
zoomabletrue图片是否可缩放
rotatabletrue图片是否可旋转
scalabletrue图片是否可翻转
transitiontrue使用 CSS3 过度
fullscreentrue播放时是否全屏
keyboardtrue是否支持键盘
urlsrc设置大图片的 url

参考资料:

https://blog.csdn.net/AdminGuan/article/details/103574434

https://www.cnblogs.com/chenziyu/p/10270934.html

到此这篇关于Vue + ElementUI表格内实现图片点击放大效果的两种方式的文章就介绍到这了,更多相关Vue ElementUI图片点击放大内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文