背景:
展示 用戶的圖片及操作
步驟:
一、安裝 v-viewer插件
npm install v-viewer
二、main.js 中全局配置
//fss 圖片點擊放大預覽v-viewer插件
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
三、頁面使用
html:
<!-- 展示 -->
<div class="Show_box">
<div class="images" v-viewer="Options">
<div v-for="(itme,index) in imgSrcList" :key="index" >
<div class="img_div">
<img :src="itme" @click="show" class="img_box">
</div>
</div>
</div>
</div>
JS:
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
components: {
ElImageViewer
},
data(){
return{
/********************** **********************/
imgSrcList:[],
Options:{
'inline': true, //內聯
'button': true,
'navbar': true, //導航欄
'title': true,
'toolbar': true, //工具欄
'tooltip': true, //工具提示
'movable': true, //可移動的
'zoomable': true, //可縮放
'rotatable': true, //可旋轉
'scalable': true, //可擴展
'transition': true, //過渡
'fullscreen': true, //全屏
'keyboard': true, //鍵盤
},
}
},
methods:{
//獲取照片
getImgs(){
let arr = [
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
'http://pic16.nipic.com/20110817/2839526_152333630088_2.jpg',
'http://b-ssl.duitang.com/uploads/item/201506/05/20150605173346_LfWdB.jpeg',
];
this.imgSrcList = arr;
},
show () {
let viewer = this.$el.querySelector('.images').$viewer;
viewer.show()
}
},
created(){
this.getImgs();
}
}
</script>
四、頁面效果
列表展示:
點擊後:
參考 v-viewer網址: https://www.npmjs.com/package/v-viewer