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://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
  "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
];
const images = [
  { url: imgs[0], thumbnail: imgs[0], title: "标题", desc: "描述" },
  { url: imgs[1], thumbnail: imgs[1], title: "标题", desc: "描述" },
  { url: imgs[2], thumbnail: imgs[2], title: "标题", desc: "描述" },
];
</script>

<template>
  <div id="app">
    <div class="image">
      <div class="item" v-for="(item, index) in images" :key="item.url">
        <Image
          :src="item.url"
          :images="images"
          fit="contain"
          width="100%"
          preview
          :aspectRatio="9 / 16"
          hideOnClickModal
          :initialIndex="index"
          loop
        />
      </div>
    </div>

    <div class="viewer">
      <Viewer
        style="width: 100%; height: 100%"
        :images="images"
        navigation
        toolbar
        loop
      />
    </div>
  </div>
</template>

<style lang="less">
html,
body,
#app {
  margin: 0;
  padding: 0;
}
#app {
  width: 800px;
  margin: 100px auto;
  .image {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 33.3%;
      box-sizing: border-box;
      padding: 0 5px;
    }
  }
  .viewer {
    margin-top: 20px;
    width: 800px;
    height: 500px;
  }
}
</style>

##Image组件说明

传参/Props

参数	说明	类型	默认值
base	地址前缀	string	""
src	图片地址	string	""
token	token参数	string	""
aspectRatio	固定宽高比	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"
• aspectRatio: 如果设置了aspectRatio，则高度由宽度和aspectRatio决定
• 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

##Viewer组件说明

传参/Props 【文档还在写】

参数	说明	类型	默认值
images	图片列表	array	[]
navigation	底部预览条	boolean	false
toolbar	工具栏	boolean	false

预览效果/Preview

补充说明

目前还在开发中，可能更新会比较频繁，bug也比较多，安装新的包之前最好先删除yarn.lock文件，以确保最新内容生效

联系我/Contact me

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