vue常用插件之图片预览
程序员文章站
2022-04-29 13:05:40
v viewer(1.4.2) 非常实用的图片预览插件,支持旋转、缩放、翻转等操作 一、npm安装 npm i v viewer S 二、全局引入(main.js中) 三、使用 相关配置项 效果图 ......
v-viewer(1.4.2)
非常实用的图片预览插件,支持旋转、缩放、翻转等操作
一、npm安装
npm i v-viewer -s
二、全局引入(main.js中)
import 'viewerjs/dist/viewer.css' import viewer from 'v-viewer' vue.use(viewer) //配置项 viewer.setdefaults({ zindexinline:9999 })
三、使用
<!--1、以组件的形式--> <viewer :images="photo"> <img v-for="(src,index) in photo" :src="src" :key="index"/> </viewer> <!--2、以指令的形式--> 只需要将v-viewer指令添加到任意元素即可,该元素下的所有img元素都会被viewer自动处理。 <div v-viewer> <img v-for="(src,index) in photo" :src="src" :key="index"/> </div>