Imageviewer 图片预览

使用指南

图片预览组件，可缩放拖动切换图片

代码演示

查看代码

<template>
  <div class="image-viewer-demo">
    <h3>常规用法及插槽 (请点击图片)</h3>
    <h3-image-viewer
      v-model="imageViewerVisible"
      :images="photos"
      :index="current"
      :maskClosable="true"
      :imageClosable="true"
      @menu="fireMenu"
    >
      <template #extra="{item}">
        <div class="icon-wrap" @click="delImage(item)">
          <h3-icon type="IconDeleteStroke" :size="16" color="#fff" />
        </div>
      </template>
    </h3-image-viewer>

    <ul class="photo-thumnail">
      <li v-for="(thumb, index) in photos" :key="index" @click="showImg(index)">
        <img :src="thumb.url" />
      </li>
    </ul>

    <h3>函数式触发(禁用缩放, 移动)</h3>

    <ul class="photo-thumnail">
      <li
        v-for="(thumb, index) in photos2"
        :key="index"
        @click="$imageviewer.show({index, images: photos2, zoom: false, move: false}, fnOpen, fnClose, fireMenu)"
      >
        <img :src="thumb.url" />
      </li>
    </ul>

    <h3-button
      type="primary"
      class="btn"
      @click="$imageviewer.show({index: 1, images: photos2, zoom: false, move: false}, fnOpen, fnClose, fireMenu)"
    >
      查看图片(第二张)
    </h3-button>
  </div>
</template>

<script>
import H3Button from '@/components/h3-button/';
import H3Icon from '@/components/h3-icon/';
import H3ImageViewer from '@/components/h3-image-viewer';

export default {
  components: {
    H3Button,
    H3ImageViewer,
    H3Icon,
  },
  data () {
    return {
      imageViewerVisible: false,
      show: false,
      testToast: false,
      photos: [
        {
          url: 'https://picsum.photos/id/61/400/300',
          title: '测试图片',
        },
        {
          url: 'https://picsum.photos/id/62/400/300',
        },
        {
          url: 'https://picsum.photos/id/63/300/400',
          title: '测试图片',
        },
        {
          url: 'https://picsum.photos/id/64/400/300',
        },
        {
          url: 'https://picsum.photos/id/65/400/300',
        },
        {
          url: 'https://picsum.photos/id/66/300/400',
        },
        {
          url: 'https://picsum.photos/id/66/300/400',
        },
        {
          url: 'https://picsum.photos/id/66/300/400',
        },
        {
          url: 'https://picsum.photos/id/66/300/400',
        },
      ],
      photos2: [
        {
          url: 'https://picsum.photos/id/71/400/300',
          title: '测试图片',
        },
        {
          url: 'https://picsum.photos/id/72/400/300',
        },
        {
          url: 'https://picsum.photos/id/73/300/400',
          title: '测试图片',
        },
      ],
      current: null,
    };
  },
  beforeDestroy () {
    this.$imageviewer.hide();
  },
  methods: {
    fireMenu (image, index, images) {
      console.log(image, index, images);
    },
    showImg (index) {
      this.current = index;
      this.imageViewerVisible = true;
    },
    download (src) {
      console.log(src);
      console.log('imageviewer download');
    },
    fnOpen () {
      console.log('我被显示了啊');
    },
    fnClose () {
      console.log('我被隐藏了啊');
    },
    delImage (imageItem) {
      console.log(imageItem);
    },
  },
};
</script>

<style lang="less">
.image-viewer-demo {
  padding: 30px 15px;
  h3 {
    padding: 20px 0;
  }
}
.icon-wrap {
  width: 28px;
  height: 28px;
  background-color: rgba(#707481, 0.4);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.photo-thumnail {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  flex-wrap: wrap;
  li {
    display: block;
    width: 100px;
    height: 100px;
    img {
      max-width: 100%;
    }
  }
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

按照新的图片预览组件规范修改相关样式

若要做迁移请参考

1. 弃用的props：showArrow showClose
2. 弃用的slot：title

API

常规使用

<h3-image-viewer :images="list" :index="current" v-model="visible" />

Prop

属性	描述	类型	默认值
visible	是否显示，v-model绑定值	Boolean	false
images	展示的图片数组	Array	[]
index	打开图片索引(第一张下标为 0)	Number	null
maskClosable	开启点击图片及引导之外遮罩层就会关闭	Boolean	false
imageClosable	在maskCloseable为true时，点击图片是否也可以关闭	Boolean	false
safeAreaInsetTop	上方的安全高度	String|Number	0
zoom	支持双指缩放，单指双击放大还原	Boolean	true
maxZoom	默认支持最大缩放倍数	Number	2
minZoom	支持的最小倍数，缩放小于最小值减 0.1 默认关闭	Number	0.6
move	是否可以移动	Boolean	true
getRenderContainer	把组件挂载某个地方,函数请返回节点,字符串默认通过document.querySelector查找	Function=> Node / String	document.body

• images 子配置项

属性	描述	类型
url	图片地址	string
title	图片描述	boolean

let images = [{
    url: 'xxx'
    title: 'xxx'
  }, ...];

也可以是字符串

let images = ['xxx', ...];

Event

事件名	描述	参数
toggle	切换显示时触发，v-model绑定事件	value
show	显示时回调	value：true
hide	隐藏时回调	value：false
slide	滑动图片切换的回调函数	index: number
zoom	当前放大的倍数	zoom: number
menu	长按图片触发	image, index, images

slot

slot	描述	参数
extra	底部放额外操作的插槽，如删除、下载等	-

函数式调用

引用

import Vue from 'vue';
import { H3ImageViewer } from '@lateinos/thinking-ui';
Vue.use(H3ImageViewer);

// 显示
this.$imageviewer.show(options:{images:[]}, showCb?:Function, hideCb?:Function, menuCb?:Function, extra?: (item: ImagesItem, h: CreateElement) => VNode);

// 隐藏
this.$imageviewer.hide(hideCb?:Function);

函数	描述	参数
show	options(浅合并进去) 其中images必填,回调函数	(options:{images:[]}, showCb?: 显示后回调, hideCb?: 隐藏后回调, menuCb?: 长按图片触发, extra?: 额外按钮插槽)
hide	回调函数	(hideCb?:隐藏后回调)