安装vue-directive-image-previewer
npm install vue-directive-image-previewer --save
main.js中引入
import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer)
组件中引用
<template>
<div>
<img v-image-preview src="picture-url"/>
</div>
</template>
组件的优缺点
该组件对原有样式侵入性小,使用简单,缺点是点击放大的图片不能再缩放
github地址:https://github.com/mirari/v-viewer
官方中文文档:文档网址
安装
npm install v-viewer --save
在main.js中引入
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
//Vue.use(Viewer) 默认配置写法
Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999
}
})
使用
<template>
<viewer :images="images">
<img v-for="src in images" :src="src" :key="src" width="300">
</viewer>
</template>
<script type="text/ecmascript-6">
export default {
data() {
return {
images : []
}
}
}
</script>
images 数组里的格式很简单,就是图片地址,没有多余的参数。
组件的优缺点
该组件会对原来的图片外层添加一层的DIV,也就是viewer标签生成的,所以要微调样式,支持图片的缩放、旋转等,功能更加强大。