vue中的 v-viewer+懒加载+属性修改

 

安装配置

 npm install v-viewer --save     v-viewer库

npm install vue-lazyload --save-dev   懒加载

<template>
  <div id="app">
    <viewer :images="images">
      <img v-for="src in images" v-lazy="src" :key="src">需要懒加载的图片绑定 v-bind:src 修改为 v-lazy 
    </viewer>
  </div>
</template>
<script>
  import 'viewerjs/dist/viewer.css'
  import Viewer from 'v-viewer'
  import Vue from 'vue'
  import VueLazyload from 'vue-lazyload';
  Vue.use(Viewer)
  Vue.use(VueLazyload, {
      error: 'dist/error.png',
      loading: 'dist/loading.gif',
  });
//可在下面设置中设置
  Viewer.setDefaults({
    'zIndex': 9999,
    'inline': true,
    'button': true,
    'navbar': true,
    'title': true, 
    'toolbar': true, 
    'tooltip': true, 
    'movable': true, 
    'zoomable': true, 
    'rotatable': true, 
    'scalable': true, 
    'transition': true, 
    'fullscreen': true, 
    'keyboard': true, 
    'url': 'data-source'
  
    })

 
  export default {
    data() {
      images: ['1.jpg', '2.jpg']
    }
  }
</script>

通过下面的属性，可修改对应的功能