lui - imageViewer - 图片查看器

imageViewer - 图片查看器

ImageViewer

Table Attributes

参数	说明	类型	可选值	默认值
urlList	图片列表	Array	—	[]
onChange	图片切换、缩放、旋转回调函数 (index 当前图片下标,data 参数 eg:{"scale":1.3,"deg":0,"offsetX":0,"offsetY":0,"enableTransition":true})	Function	—	(index,data) => {}
navbar	缩略图展示开关	Boolean	—	true
navbarFixed	缩略图悬浮/推拉	Boolean	—	false
navbarInitStatus	缩略图默认展开状态	Boolean	—	false
actions	操作	String	—	'zoomOut,zoomIn,screen,anticlocewise,clocelise' // 缩小，放大，全屏，逆时针，顺时针
options	设置	Object	—	—

options

参数	说明	类型	可选值	默认值
zoomRate	缩放比例	Number	—	0.1
rotateDeg	旋转角度	Number	—	90
enableTransition	方法旋转动画	Boolean	—	true
showIconHover	鼠标移入热区显示上	Boolean	—	false
hideIconDuration	鼠标移出热区隐藏按钮延迟时长	—	—	3000

demo

<template>
  <div class="app-container">
    <l-image-viewer
      :url-list="srcList"
      :on-change="onChange"
      :navbar="showThumb"
      :navbar-fixed="navbarFixed"
      :actions="actionsStr"
      :options="options"
    />
    <div class="controls">
      <h3>设置</h3>
      <div>
        鼠标移入热区显示上/下图
        <el-switch v-model="options.showIconHover" />
      </div>
      <div>
        鼠标移出热区隐藏按钮延迟时长
        <el-input v-model="options.hideIconDuration" type="number" :min="0" placeholder="请输入内容" />
      </div>
      <div>
        显示缩略图
        <el-switch v-model="showThumb" />
      </div>
      <div>
        缩略图模式随分辨率改变
        <el-switch v-model="ModeOnResizeStatus" @change="changeModeOnResize" />
        <div>(大于900时，采用【推拉】低于900时，采用【悬浮】)</div>
      </div>
      <div>
        缩略图模式
        <el-switch v-model="navbarFixed" active-text="浮动" inactive-text="推拉" />
      </div>
      <el-checkbox-group v-model="checkActions" @change="changeActions">
        <el-checkbox v-for="(v, i) in actions" :key="i" :label="v" />
      </el-checkbox-group>
      <h3>说明</h3>
      <div>鼠标滚轮放大缩小，鼠标按下拖动位置； 键盘左/右键切换上/下页，键盘上/下键切换放大缩小。</div>
    </div>
  </div>
</template>
<script>
import { rafThrottle } from '@lpg/l-ui/utils/util'
export default {
  data() {
    return {
      showThumb: true,
      navbarFixed: false,
      ModeOnResizeStatus: true,
      options: {
        showIconHover: true, // 鼠标移入热区显示上/下图
        hideIconDuration: 3000 // 鼠标移出热区隐藏按钮延迟时长
      },
      checkActions: ['zoomIn', 'zoomOut', 'screen', 'clocelise', 'anticlocewise'],
      actionsStr: ['zoomIn', 'zoomOut', 'screen', 'clocelise', 'anticlocewise'].join(','),
      actions: ['zoomIn', 'zoomOut', 'screen', 'clocelise', 'anticlocewise'],
      srcList: [
        'https://images.cnblogs.com/cnblogs_com/zc-lee/1901540/o_201216091158wugengji%20(1).jpg',
        'https://images.cnblogs.com/cnblogs_com/zc-lee/1901644/o_2012161143007aec54e736d12f2e07615a764cc2d56285356844.jpg',
        'https://images.cnblogs.com/cnblogs_com/zc-lee/1901644/o_2012161148532dcca28f8c5494ee50cec76029f5e0fe98257eea.jpg',
        'https://images.cnblogs.com/cnblogs_com/zc-lee/1901644/o_201216114728013deab63aa80376386b4f983a184f6d.jpg',
        'https://images.cnblogs.com/cnblogs_com/zc-lee/1901644/o_2012161146434e4a20a4462309f774fbcd07710e0cf3d7cad60b.jpg',
        'https://images.cnblogs.com/cnblogs_com/zc-lee/1901644/o_201216114719be34b4c27d1ed21b5e262e84ab6eddc450da3f07.jpg',
        'https://images.cnblogs.com/cnblogs_com/zc-lee/1901540/o_201216091241wugengji%20(2).jpg',
        'https://images.cnblogs.com/cnblogs_com/zc-lee/1901644/o_2012161147562c6e26d3d539b60082cb6c6aec50352ac75cb702.jpg',
        'https://images.cnblogs.com/cnblogs_com/zc-lee/1901540/o_201216091213wugengji%20(3).jpg',
        'https://images.cnblogs.com/cnblogs_com/zc-lee/1901540/o_201216091229wugengji%20(4).jpg',
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
        ...Array(1).fill('https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg')
      ]
    }
  },
  mounted() {
    this.changeModeOnResize(this.ModeOnResizeStatus)
  },
  destroyed() {
    // !Notice 清除resize事件
    this.changeModeOnResize(false)
  },
  methods: {
    onChange(index, transform) {
      console.log('onChange', index, JSON.stringify(transform))
    },
    changeModeOnResize(val) {
      if (val) {
        window.onresize = rafThrottle(this.screenResize)
      } else window.onresize = null
    },
    screenResize() {
      const newNavbarFixed = !(document.body.clientWidth > 900)
      console.log('screenResize', document.body.clientWidth, newNavbarFixed)
      if (this.navbarFixed !== newNavbarFixed) this.navbarFixed = newNavbarFixed
    },
    changeActions(val) {
      this.actionsStr = val.join('')
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  position: relative;
  .controls {
    position: absolute;
    width: 500px;
    line-height: 1.3;
    background-color: rgba($color: #fff, $alpha: 0.5);
    padding: 20px;
    top: 0;
    right: 0;
  }
}
</style>