vue3-image-viewer

安装/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: [e-mail]