viewer的使用

<span  v-for="(item,$index) in images"  class="images" :key="item.filePath" v-viewer>
              <img :src="item.filePath" :key="item.filePath" width="300">
              <div v-if="item.filePath" class="handle">
                <div style="float: left" >
                  <Icon v-if="!disabled" class="h-icon" title="刪除" type="md-trash" @click.stop="handleDelete(item.id,$index)"/>
                </div>
                <div style="float: right">
                  <Icon class="h-icon" title="查看" type="md-eye" @click.stop="handleViewer()"/>
                </div>
               </div>
            </span><span  v-for="(item,$index) in images"  class="images" :key="item.filePath" v-viewer>
              <img :src="item.filePath" :key="item.filePath" width="300">
              <div v-if="item.filePath" class="handle">
                <div style="float: left" >
                  <Icon v-if="!disabled" class="h-icon" title="刪除" type="md-trash" @click.stop="handleDelete(item.id,$index)"/>
                </div>
                <div style="float: right">
                  <Icon class="h-icon" title="查看" type="md-eye" @click.stop="handleViewer()"/>
                </div>
               </div>
            </span>

删除

  handleDelete (id, index) {
    const m = this
    delFile({ id: id }).then(res => {
      if (res) {
        m.images = _.remove(m.images, (el, k) => k != index)
        this.$Message.success('刪除成功')
      }
    })
  },

放大图片

handleViewer () {
        const viewer = this.$el.querySelector('.images').$viewer
        viewer.show()
      },

如果是把span写在

<viewer :images="images"> </viewer>

标签里
直接就起到放大的作用了

如果span在v-viewer里面就不可以用$viewer来获取了

在main.js里面配置

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

Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999
  }
});
Vue.use(ViewUI);