标签：function console log viewer type element true 轮播

第一步，安装v-viewer

npm install v-viewer --save

第二步，在main.js中配置全局变量：

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: { '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' }
})
/*
　　

Viewer.setDefaults({
    'inline':true,
    'button':true, //右上角按钮
    "navbar": true, //底部缩略图
    "title": true, //当前图片标题
    "toolbar": true, //底部工具栏
    "tooltip": true, //显示缩放百分比
    "movable": true, //是否可以移动
    "zoomable": true, //是否可以缩放
    "rotatable": true, //是否可旋转
    "scalable": true, //是否可翻转
    "transition": true, //使用 CSS3 过度
    "fullscreen": true, //播放时是否全屏
    "keyboard": true, //是否支持键盘
    "url": "data-source",
    ready: function (e) {
      console.log(e.type,'组件以初始化');
    },
    show: function (e) {
      console.log(e.type,'图片显示开始');
    },
    shown: function (e) {
      console.log(e.type,'图片显示结束');
    },
    hide: function (e) {
      console.log(e.type,'图片隐藏完成');
    },
    hidden: function (e) {
      console.log(e.type,'图片隐藏结束');
    },
    view: function (e) {
      console.log(e.type,'视图开始');
    },
    viewed: function (e) {
      console.log(e.type,'视图结束');
      // 索引为 1 的图片旋转20度
      if(e.detail.index === 1){
          this.viewer.rotate(20);
      }
    },
    zoom: function (e) {
      console.log(e.type,'图片缩放开始');
    },
    zoomed: function (e) {
      console.log(e.type,'图片缩放结束');
    }
  })

*/

第三步，在vue文件中调用：

<template>
  <el-carousel height="150px">
    <el-carousel-item v-for="item in imgList" :key="item" :autoplay="false">
      <viewer style="height: 150px;">
        <img :key="index" :src="item"  class="item-card">
      </viewer>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
  export default {
    name: 'AttributeTable',
      data() {
        return {
          imgList: [
            'http://localhost:3000/static/img/login-background.bbdd7d12.png',
            'http://localhost:3000/static/img/1.d9e9852f.jpg',
          ]
        }
      }
    }
</script>

<style lang="scss" scoped>
.item-card {
  height: 150px;
  width: 100%;
}
</style>

标签：function,console,log,viewer,type,element,true,轮播
来源： https://www.cnblogs.com/yiliangmi/p/15926699.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。