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 @   等日落  阅读(412)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
主题色彩