v-img
made with Vuejs

v-img是一个支持图片全屏预览的Vue指令插件，只需要在img标签中添加一个指令，就可以全屏预览图像。

安装

Npm

npm i v-img

Yarn

yarn add v-img

浏览器

<!-- After vuejs -->
<script src="https://cdn.jsdelivr.net/npm/v-img@latest/dist/v-img.min.js"></script>

使用

全局引入

import Vue from 'vue';
import VueImg from 'v-img';

Vue.use(VueImg,{
  // 是否使用`alt` 属性作为图片的标题
  altAsTitle: false,
  // 是否在`关闭`按钮附近显示`下载`按钮，点击可以在新窗口中打开图片。
  sourceButton: false,
  // 设置应用到img元素上的监听事件
  openOn: 'click',
  // 当群组大于1时，是否显示缩略图
  thumbnails: false,
});

使用

<img v-img src="...">

使用相同的指令参数让图片组成一组。

<img v-img:name src="...">
<img v-img:name src="...">

也可以这样传入选项

<img v-img="{...}" src="...">

示例