vue中使用v-viewer组件放大图片

默认使用

1. 安装

npm i v-viewer -D

2. 在main.js中导入

// 引入图片放大组件
import Viewer from 'v-viewer'
Vue.use(Viewer)

3. 在页面中使用

<template>
  <div id="app">
    <!-- directive -->
    <div class="images" v-viewer>
      <img src="1.jpg">
      <img src="2.jpg">
      ...
    </div>
    <!-- component -->
    <viewer :images="images">
      <img v-for="src in images" :src="src" :key="src">
    </viewer>
  </div>
</template>
<script>
  import 'viewerjs/dist/viewer.css'
  
  export default {
    data() {
      images: ['1.jpg', '2.jpg']
    }
  }
</script>

4. 效果

配置自定义效果

官网地址：mirari.cc

git地址：fengyuanchen/viewerjs

1.配置效果

• 1. 默认打开 inline
• 2. 不需要全局放大按钮 button
• 3. 不需要工具栏 toolbar
• 4. 不需要图片标题 title
• 5. 不需要图片缩略框 navbar

我们配置的效果图

2. 页面中使用

html

	el-button.glass-box(icon="el-icon-refresh" circle @click="reset()")
	viewer(:images="[imgUrl]" :options="options" @inited="inited" style="width:100%;height:100%")  

data中设置options属性

options: {
    toolbar: false,
    navbar: false,
    inline: true,
    button: false,
    title: false
},

绑定事件

通过:options="options" 绑定事件，这里我想要的效果是通过自定义按钮来初始化图片

methods: {
      inited (viewer) {
        this.$viewer = viewer
      },
      reset () { // 初始化图片
        this.$viewer.reset()
      }
    }

所有的事件

3. 参考资料

Vue中使用viewer.js图片查看器

mirari.cc