转载:https://github.com/fengyuanchen/viewerjs
预览效果:https://fengyuanchen.github.io/viewerjs/
在vue中的简单用法
第一步:安装插件
npm install viewerjs
第二步:在组件中引入
import Viewer from 'viewerjs'; import 'viewerjs/dist/viewer.css';
下面是在组件中使用的例子:
插件还有许多配置项,详情可参考作者的github:https://github.com/fengyuanchen/viewerjs
<template>
<div class='container'>
<div style="margin: 100px 300px;">
<h1>Viewer图片预览插件</h1>
<div style="width: 300px;">
<img ref="image" src="@/assets/20151127114401_AKHjy.jpeg" alt="Picture" style="width: 80%;">
</div>
</div>
</div>
</template>
<script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default {
name: 'index',
components: {
Cascader
},
data(){
return{
}
},
mounted(){
// View an image
const viewer = new Viewer(this.$refs.image);
},
methods: {
}
}
</script>
<style scoped>
</style>
效果如下:
引入本地图片,并显示
<template>
<div class='container'>
<div style="margin-top: 100px;" ref="imageList">
<h1>Viewer图片预览插件</h1>
<div style="width: 300px;display: inline-block;" v-for="item in imgs">
<img ref="image" :src="item" alt="Picture" style="width: 80%;">
</div>
</div>
</div>
</template>
<script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
import img1 from '@/assets/20151127114401_AKHjy.jpeg'
import img2 from '@/assets/131131113416992x0ihdbg7_medium.jpg'
import img3 from '@/assets/oYYBAFOpMQSICdfTABWEAqeTaUQAABopQJHyGoAFYQa258.jpg'
import img4 from '@/assets/qqqq.jpg'
export default {
name: 'index',
components: {
img1,
img2,
img3,
img4
},
data(){
return{
imgs: [img1, img2, img3, img4]
}
},
mounted(){
const viewer = new Viewer(this.$refs.imageList,{
navbar: true, //底部缩略图
title: true, //当前图片标题
keyboard: true //是否支持键盘
});
},
}
</script>
效果如下: