vue框架中:点击图片使得图片放大展示方法

安装插件

cnpm install v-viewer --save

使用npm方式安装可能会报错,安装不上

在main.js引用

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

//Vue.use(Viewer) 默认配置写法
Vue.use(Viewer, {
    defaultOptions: {
        zIndex: 9999
    }
})

在需要放大的图片位置使用

<!-- 图片循环展示 -->
<div class="screen-se">
   <viewer :imglist="imglist" class="screen-view">
      <img class="screen-img" :src="item" v-for="(item,index ) in imglist" :key="index">
   </viewer>
</div>

imglist在data里面定义数组

图片的数据很简单:
'/test/test.png'
posted @ 2022-11-26 10:39  等日落  阅读(355)  评论(0编辑  收藏  举报