• element的鼠标移到图片时，放大预览效果。实现思路：element的 el-table + el-popover

<template>
    <div class="test-image">
         <el-table :data="tabData" border>
            <el-table-column align="center" label="示例图片" width="80" :show-overflow-tooltip="true" prop="image_url">
                <template slot-scope="scope">
                    <el-popover placement="right" :title="scope.row.imgName" trigger="hover" width="250" >
                        <el-image slot="reference" :src="scope.row.image_url" :alt="scope.row.image_url"></el-image>
                        <el-image :src="scope.row.image_url"></el-image>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column align="center" label="标题" width="160" :show-overflow-tooltip="true" prop="imgName"></el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
  data () {
    return {
      tabData: [

        { image_url: 'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg', imgName: 'apple' },
        { image_url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', imgName: 'bird' },
        { image_url: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', imgName: 'deer' }

      ]
    }
  }
  
}
</script>

注：
① el-table绑定的data属性是表格渲染的列表tabData，el-table-column是表格的单元格，它的prop的值是tabData中的键名;show-overflow-tooltip是内容过多显示tooltip;
② el-popover 是element的Popover 弹出框， placement是出现的位置
③ popover中有 slot="reference" 的元素是当前触发popover的元素。
④ popover中 trigger="hover"，表示hover时触发

所以上面的：

 <el-popover placement="right" :title="scope.row.imgName" trigger="hover" width="250" >
        <el-image slot="reference" :src="scope.row.image_url" :alt="scope.row.image_url"></el-image>   是触发了popover的元素，即鼠标移动到这张图片上，下面那张图片就会显示，且宽为popover中的定义的  width="250"；
        <el-image :src="scope.row.image_url"></el-image>   它只是popover的显示内容，popover 弹出框被触发，它就显示
  </el-popover> 

效果如图( 鼠标经过第三张图 )：

• 小结：

  ① Table中的，表格自定义列模板
  通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据；
  参考：https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-slot

  ② Popover 弹出框
  trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。对于触发 Popover 的元素，有两种写法：使用 slot="reference" 的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。

1.安装v-viewer

npm install v-viewer -s

2.在main.js引入js,css

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999
  }
})


Viewer.setDefaults({
  Options: { 
    "inline": true, // 是否启动inline模式
    "button": true, // 是否显示右上角关闭按钮
    "navbar":true, // 是否显示缩略图导航
    "title": true, // 是否显示当前图片的标题
    "toolbar": true,  // 是否显示工具栏
    "tooltip": true, // 是否显示缩放百分比
    "movable": true, // 图片是否可移动
    "zoomable": true, // 图片是否可缩放
    "rotatable": true, // 图片是否可旋转
    "scalable": true, // 图片是翻转
    "transition": true, // 是否使用css3过渡
    "fullscreen": true, // 播放时是否全屏
    "keyboard": true, // 是否支持键盘
    "url": "data-source" // 设置大图片的url
  }
});

3.页面使用

<el-row :gutter="3">
    <el-col :spn="10" v-for="(item,index) in urls" :key="index" style="width: 300px;" class="row_class">

        <viewer :images="item" class="viewer" ref="viewer" :zoomable="false">
            <img  :src="item" :key="index" style="width: 300px">
        </viewer>

        <div>
            <el-tooltip class="classDelete" effect="dark" content="删除" placement="top">
                <span class="Delete" @click="deleteImg(item,index)" ><i class="el-icon-delete"></i></span>
            </el-tooltip>
        </div>
    </el-col>
</el-row>

4.效果图

前言

我现在在做的vue项目使用的组件库是Ant Design的vue版本，里面有个图片组件，但是用起来不顺心。在bing找了一些，要么不适配vue3.x，要么就是直接报错😥。

于是就自己整了一个，希望也可以帮助像我一样的小伙伴🤗

我第一次发布npm包，也是第一次写文章，欢迎大佬们评论

介绍

此插件使用简单方便，只有一个api，一个事件，避免了复杂的文档和使用教程。

其依赖于screenfull，安装插件时会自动安装，如出现未找到screenfull，使用npm i screenfull安装即可

源码在github，一起学习，共同进步。希望有个star🙄

如何使用

已发布于npm，可直接安装使用

安装

npm i useful-photo-preview

使用

• 引用

  import imgShow from useful-photo-preview
  

• 使用

  <img-show :src="img_url" @close="onclose"></img-show>
  

功能

• 全屏预览，复位，左右旋转

• 鼠标滚轮放大缩小

• 鼠标拖动移动位置

• 双击进入和退出全屏预览

• 点击空白位置退出(调用@close事件)

• ESC键退出(调用@close事件)

• 宽缩放最小150px 左右，最大5000px 左右

预览

全屏时背景会变成纯黑色

API

• 参数

  • :src 图片链接，或base64数据

• 事件

  • @close 关闭事件