[vue] v-viewer图片预览插件的使用

533_

已于 2023-07-18 14:09:31 修改

阅读量885

点赞数

分类专栏： # vue 文章标签： vue.js

于 2022-06-02 00:12:39 首次发布

本文链接：https://blog.csdn.net/qq_14993591/article/details/125092866

版权

Vue.js v-viewer 图片预览组件插件

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

169 篇文章 3 订阅

订阅专栏

npm install v-viewer --save

<template>
  <div id="app">
    <viewer 
      :options="options" 
      :images="images"
        @inited="inited"
        class="viewer" 
        ref="viewer"
    >
      <template scope="scope">
        <img v-for="src in scope.images" :src="src" :key="src">
        {{scope.options}}
      </template>
    </viewer>
    <button type="button" @click="show">Show</button>
  </div>
</template>

    data() {
      images: ['1.jpg', '2.jpg'],
      options: {
        url: 'data-source',
      },
    },
    
    methods: {
      inited (viewer) {
        this.$viewer = viewer
      },
      show () {
        //调用$viewer的show方法，默认显示第一张图片
        this.$viewer.show()
        // 或者
        // this.$refs.viewer.$viewer.show()
        
        //如果需要指定显示某一张图片使用view方法，index是指定的那张图片所在数组的位置索引
        //this.$viewer.view(index)
      }
    }
  }