Vben Admin

Preview

将图片预览组件组件函数化。通过函数方便创建组件

Usage

<template>
  <div class="p-4">
    <Alert message="有预览图" type="info" />
    <div class="flex justify-center mt-4">
      <img :src="img" v-for="img in imgList" :key="img" class="mr-2" @click="handleClick(img)" />
    </div>
    <Alert message="无预览图" type="info" />
    <a-button @click="handlePreview" type="primary" class="mt-4">预览图片</a-button>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Alert } from 'ant-design-vue';
  import { createImgPreview } from '/@/components/Preview/index';
  const imgList: string[] = [
    'https://picsum.photos/id/66/346/216',
    'https://picsum.photos/id/67/346/216',
    'https://picsum.photos/id/68/346/216',
  ];
  export default defineComponent({
    components: { Alert },
    setup() {
      function handleClick(img: string) {
        createImgPreview({ imageList: [img] });
      }

      function handlePreview() {
        createImgPreview({ imageList: imgList });
      }
      return { imgList, handleClick, handlePreview };
    },
  });
</script>

createImgPreview

参数/Options

属性类型默认值可选值说明
imgListstring[]--图片列表
indexnumber0-初始预览时的图片索引
scaleStepnumber--缩放步进值（每次缩放的幅度）。默认为自动（当前缩放值的10%）
defaultWidthnumber--默认宽度（单位px）。当提供此值时，所有图片初始时都会被缩放至此宽度
maskClosablebooleanfalsetrue/false点击遮罩时是否自动关闭预览
rememberStatebooleanfalsetrue/false是否记住每张图片各自的缩放状态
onImgLoad({ index: number, url: string, dom: HTMLImageElement }) => void--图片加载成功时的回调函数
onImgError({ index: number, url: string, dom: HTMLImageElement }) => void--图片加载失败时的回调函数

返回值/PreviewActions

可用于控制当前预览状态

interface PreviewActions {
  // 重置状态
  resume: () => void;
  // 关闭预览
  close: () => void;
  // 显示前一张
  prev: () => void;
  // 显示后一张
  next: () => void;
  // 设置缩放比例(针对当前图片)
  setScale: (scale: number) => void;
  // 设置旋转角度(针对当前图片)
  setRotate: (rotate: number) => void;
}