安装/Installation

npm i vue3-image-viewer 或者/or yarn add vue3-image-viewer

引入/Import

import { Image } from 'vue3-image-viewer';

效果预览/Preview

使用示例/Example

<template>
  <div class="image">
    <div class="item" v-for="(item, index) in images" :key="item.url">
      <Image
        width="270px"
        height="300px"
        :src="item.url"
        preview
        :images="images"
        :initialIndex="index"
      >
        <template #footer>footer</template>
        <template #loading>LOADING</template>
        <template #error>ERROR</template>
      </Image>
    </div>
  </div>
</template>

<script setup>
import { Image } from 'vue3-image-viewer'
import 'vue3-image-viewer/dist/style.css'
const images = [
  {
    title: 'title',
    desc: 'desc',
    url: 'http://iph.href.lu/800x540',
  },
  {
    title: 'title',
    desc: 'desc',
    url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
  },
  {
    title: 'title',
    desc: 'desc',
    url: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
  },
  {
    title: 'title',
    desc: 'desc',
    url: '',
  },
];
</script>

<style lang="less" scoped>
.image {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  width: 1200px;
  margin: 0 auto;
}
</style>

<template>
  <div class="viewer">
    <div class="viewer-wrap">
      <!-- 如果传入了markList则不取images中的marks -->
      <Viewer
        ref="viewerRef"
        :imageList="images"
        navigation
        toolbar
        drawable
        deleteable
        :scaleMin="1"
        @drawEnd="drawEnd"
        @resize="onResize"
        @delete="onDelete"
        @switch="onSwitch"
        :initialIndex="currentIndex"
      >
        <template #loading>LOADING</template>
        <template #error>ERROR</template>
      </Viewer>
      <!-- 自定义 -->
      <div class="tools">
        <div @click="toolBtn('fit')">适应窗口</div>
        <div @click="toolBtn('prev')">上一个</div>
        <div @click="toolBtn('next')">下一个</div>
        <div @click="toolBtn('reset')">重置</div>
      </div>
    </div>
    <div class="preview">
      <div class="item" v-for="(item, index) in current.marks" :key="index">
        <Viewer :image="current" :mark="item" focus>
          <template #loading>LOADING</template>
          <template #error>ERROR</template>
        </Viewer>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Viewer } from 'vue3-image-viewer'
import 'vue3-image-viewer/dist/style.css'
import { reactive, ref, computed, unref } from 'vue';
const images = reactive([
  {
    title: 'title',
    desc: 'desc',
    url: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    thumbnail:
      'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    marks: [],
  },
  {
    title: 'title',
    desc: 'desc',
    url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
    thumbnail:
      'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
    marks: [
      {
        width: 220,
        height: 220,
        left: 470,
        top: 230,
      },
    ],
  },
  {
    title: 'title',
    desc: 'desc',
    url: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
    thumbnail:
      'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
    marks: [
      {
        width: 80,
        height: 40,
        left: 320,
        top: 220,
      },
    ],
  },
  {
    title: 'title',
    desc: 'desc',
    url: '',
    thumbnail: '',
    marks: [],
  },
]);
const currentIndex = ref(1);
const current = computed(() => images[currentIndex.value]);
const viewerRef = ref(null);

function onSwitch(index) {
  currentIndex.value = index;
}
function onResize({ target, detail }) {
  const { left, top, width, height } = detail;
  const mark = { ...target };
  mark.left = left;
  mark.top = top;
  mark.width = width;
  mark.height = height;
  const idx = current.value.marks.indexOf(target);
  if (idx > -1) {
    current.value.marks.splice(idx, 1, mark);
  }
}
function onDelete({ target }) {
  const idx = current.value.marks.indexOf(target);
  if (idx > -1) {
    current.value.marks.splice(idx, 1);
  }
}
function drawEnd(item) {
  const { left, top, width, height } = item;
  if (!current.value.marks) {
    current.value.marks = [];
  }
  const newMark = {
    id: current.value.marks.length + 1 + '',
    left,
    top,
    width,
    height,
  };

  current.value.marks.unshift(newMark);
}
function toolBtn(type) {
  const viewer = unref(viewerRef);
  if (!viewer) {
    return;
  }
  if (type === 'fit') {
    viewer.toggleFit();
  }
  if (type === 'next') {
    viewer.next();
  }
  if (type === 'prev') {
    viewer.prev();
  }
  if (type === 'reset') {
    viewer.reset();
  }
}
</script>

<style lang="less" scoped>
.viewer {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  .viewer-wrap {
    width: 1000px;
    height: 600px;
    .tools {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 10px;
      div {
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
        padding: 0 5px;
        font-size: 14px;
        line-height: 22px;
      }
    }
  }
  .preview {
    width: 200px;
    margin-left: 20px;
    height: 600px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    .item {
      width: 100%;
      height: 150px;
    }
  }
}
</style>

Image 组件说明

传参/Props

| 参数 | 说明 | 类型 | 默认值 | | ---------------- | -------------------------------------------------------------------------------------------------: | ---------------: | ------: | | base | 地址前缀 | string | "" | | src | 图片地址 | string | "" | | token | token 参数 | string | "" | | aspectRatio | 固定宽高比 | number | 0 | | fit | object-fit | string | "fill" | | lazy | 懒加载 | boolean | false | | hideOnClickModal | 点击遮罩关闭预览 | boolean | false | | initialIndex | 在预览数组中的位置 | number | 0 | | preview | 是否开启预览 | boolean | false | | images | 预览列表 | array | [] | | loop | 开启循环 | boolean | false | | preload | 预览预加载 | array or boolean | [0,2] | | width | 盒子宽度 | string | "" | | height | 盒子高度 | string | "" | | alt | alt | string | "" | | referrerPolicy | referrerPolicy | string | "" | | bgColor | 背景颜色 | string | "black" |

参数说明/Props Explanation

• src: 如果 src 是绝对地址，则 base, token 不生效，如果是相对地址，返回 base+src+?token="abc"
• width&height: 可以设置固定 px 值或者百分比值，等同于原生 css 属性
• aspectRatio: 如果设置了 aspectRatio，则高度由宽度和 aspectRatio 决定，height 不再生效
• preload: 如果设置为 false 则关闭预加载，如果设置为[1,2]，则在查看当前图片的同时会同时加载左边 1 张右边 2 张图片

组件事件/Event

• error: 图片加载出错事件/ Same as native error
• load: 图片加载完成事件/ Same as native load
• close: 关闭预览事件 / Emit when close the preview
• switch: 切换预览图片事件，返回下标 / Emit when switch the preview, return current index

支持插槽/Slot

• error:加载出错占位/ Triggers when image load failed
• loading:加载中占位/ Triggers when image is loading
• footer:图片底部占位/ Placeholder on the bottom

Viewer 组件说明

传参/Props

| 参数 | 说明 | 类型 | 默认值 | | ------------ | ------------------------------------------------------------: | ---------------: | ---------: | | base | 地址前缀 | string | "" | | token | token 参数 | string | "" | | scaleMax | 最大缩放倍数 | number | 15 | | scaleMin | 最小缩放倍数 | number | 1 | | scaleStep | 缩放步进 | number | 1.1 | | initialScale | 初始缩放倍数 | number | 1 | | imageList | 图片列表 | array | [] | | markList | 标记框列表 | array | [] | | initialIndex | 初始展示图片下标 | number | 0 | | loop | 开启循环 | boolean | 0 | | navigation | 底部预览条 | boolean | false | | toolbar | 工具栏 | boolean | false | | keyboard | 开启快捷键 | array | ['A', 'D'] | | fit | object-fit | string | "contain" | | preload | 图片预加载 | array or boolean | [0,2] | | fixed | 禁止缩放 | boolean | false | | focus | 锁定标记框的展示模式 | boolean | false | | drawable | 是否开启标记功能 | boolean | false | | deleteable | 是否显示移除标记框的按钮 | boolean | false | | image | 单张图片 | object | null | | mark | 单个标记框 | object | null |

参数说明/Props Explanation

• scaleStep: 按倍数缩进
• keyboard: 支持的快捷键有上一项: A，下一项: D，锁定标记框: Space，取消框图锁定: Esc
• imageList: 数据结构请参考示例代码，优先使用 imageList，其次使用 image
• markList: 数据结构请参考示例代码，标记框优先使用 markList，其次是 image 的 marks 字段，再次是 mark 字段
• focus: focus 模式下，不可缩放，锁定标记框，不可调整大小
• drawable: 开启绘制标记框的功能

组件事件/Event

• error: 图片加载出错事件/ Same as native error
• load: 图片加载完成事件/ Same as native load
• switch: 切换预览图片事件，返回下标 / Emit when switch the preview, return current index
• drawEnd: 绘制结束时的事件，返回标记框图的关键信息
• resize: 调整大小结束时的事件，返回 resize 的关键信息
• delete: 点击移除按钮时触发的事件，返回点击的对象
• zoom: 缩放时触发的事件，返回当前的缩放倍数

组件方法/Methods

• clearDraw: 清除绘制的标记框图
• switchIndex: 切换图片，传入图片下标值
• toggleFit: 切换 contain 和 cover 模式
• unFocusMark: 取消框图锁定
• focusMark: 锁定框图
• reset: 重置图片状态(缩放、移动等)
• download: 下载图片
• zoomOut: 放大
• zoomIn: 缩小
• prev: 上一张
• next: 下一张

支持插槽/Slot

• error: 加载出错占位/ Triggers when image load failed
• loading: 加载中占位/ Triggers when image is loading
• toolbar: 图片底部工具栏的占位

补充说明

联系我/Contact me

• QQ: 995413842
• 微信: zhoulh1994
• gmail: [email protected]