vue3-image-viewer

• 安装/Installation

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

• 引入/Import

import { Image } from "vue3-image-viewer";
import "vue3-image-viewer/dist/style.css"

• 使用/Use

<script setup lang="ts">
  const imgs = [
    "https://photos.google.com/photo/AF1QipOYIGOfsvgpc52sep9Hfn7agaFdEColKDliOq9V",
    "https://photos.google.com/photo/AF1QipN68f6aaR5X9rCsDzx0BRBT3Jf75cSl_2ahuMa4",
    "https://photos.google.com/photo/AF1QipOir42BbOxnI_fs4zA3A-kPArijqkvzZLfUjjMH",
  ];
  const images = [
    { url: imgs[0], title: "标题/Title", desc: "描述/Desc" },
    { url: imgs[1], title: "标题/Title", desc: "描述/Desc" },
    { url: imgs[2], title: "标题/Title", desc: "描述/Desc" },
  ];
</script>

<template>
  <div v-for="(item, index) in images" :key="index">
    <Image
      style="width: 200px;height: 200px;"
      :src="item.url"
      fit="contain"
      preview
      :images="images"
      :initialIndex="index"
      hideOnClickModal
      loop
    />
  </div>
</template>

• 参数/Props

  参数	说明	类型	默认值
  base	地址前缀	string	""
  src	图片地址	string	""
  token	token参数	string	""
  ratio	固定宽高比	number	0
  fit	object-fit	string	"none"
  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 ps

• src: 如果src是绝对地址，则base, token不生效，如果是相对地址，返回base+src+?token="abc"
• ratio: 如果设置了ratio，则高度由宽度和ratio决定
• lazy: 如果设置了懒加载，则会监听第一个设置了滚动的父元素的滚动事件
• 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

• 预览效果/Preview

• 联系我/Contact me

• QQ:995413842
• 微信:zhoulh1994
• gmail:[e-mail]