记录v-viewer使用

最新推荐文章于 2024-08-08 08:30:37 发布

三155

最新推荐文章于 2024-08-08 08:30:37 发布

阅读量618

点赞数 1

文章标签： vue.js javascript 开发语言

本文链接：https://blog.csdn.net/beloved_jodie/article/details/123276682

版权

用于图片浏览的Vue组件 v-viewer

官网

npm install v-viewer

<template>
  <div>
    <!-- directive -->
    <div class="images" v-viewer>
      <img v-for="src in images" :key="src" :src="src">
    </div>
    <!-- component -->
    <viewer :images="images">
      <img v-for="src in images" :key="src" :src="src">
    </viewer>
    <!-- api -->
    <button type="button" @click="show">Click to show</button>
  </div>
</template>
<script>
  import 'viewerjs/dist/viewer.css'
  import VueViewer from 'v-viewer'
  import Vue from 'vue'
  Vue.use(VueViewer)
  Viewer.setDefaults({  //  修改全局默认配置项
    inline: false, // 启用 inline 模式
    title: true,
    navbar: true, // 底部缩略图
  });
  export default {
    data() {
      return {
        images: [
          "https://picsum.photos/200/200",
          "https://picsum.photos/300/200",
          "https://picsum.photos/250/200"
        ]
      };
    },
    methods: {
    // 可直接使用按钮打开  浏览图片
      show() {
        this.$viewerApi({
          images: this.images,
        })
      },
    },
  }
</script>