vue2点击图片实现预览

1.先下载 npm install v-viewer@1.7.4 (vue2中不写版本号不一定会成功)
2.在mian.js中导入使用
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css';
Vue.use(Viewer,{
defaultOptions:{
zIndex:9999
}
})
3.<el-image :src="photo_lr" style="height: 40px; width: 40px; cursor:pointer;" @click="openPreview(photo_lr)">
点击事件触发的方法
// 点击图片放大
openPreview(imageUrl) {
this.$viewerApi({
images: [imageUrl]//要预览的图片 URL 列表//其他配置选项,如 zIndex、toolbar 等
});
},

posted @ 2024-11-14 11:27  liur135  阅读(665)  评论(0)    收藏  举报