快捷導(dǎo)航

基于Vue3+TypeScript實(shí)現(xiàn)圖片預(yù)覽組件

更新時(shí)間：2024年04月28日 09:10:12 作者：下雨會(huì)打傘的前端

在現(xiàn)代的 Web 應(yīng)用中,圖片預(yù)覽是一個(gè)常見的需求,本文將介紹如何使用 Vue3 和 TypeScript 開發(fā)一個(gè)圖片預(yù)覽組件,支持展示單張或多張圖片,并提供了豐富的配置選項(xiàng),需要的朋友可以參考下

簡(jiǎn)介

在現(xiàn)代的 Web 應(yīng)用中，圖片預(yù)覽是一個(gè)常見的需求。本文將介紹如何使用 Vue3 和 TypeScript 開發(fā)一個(gè)圖片預(yù)覽組件，支持展示單張或多張圖片，并提供了豐富的配置選項(xiàng)。

組件功能

支持單張或多張圖片: 可以同時(shí)預(yù)覽單張或多張圖片，支持左右切換。
自定義配置選項(xiàng): 提供了豐富的配置選項(xiàng)，如圖片縮放方式、懶加載、組件尺寸等。
多張圖片：無限循環(huán)預(yù)覽,默認(rèn)點(diǎn)擊為首張，布局左右自適應(yīng)父元素寬度,上下間距可通過參數(shù)(rowGap)控制。

組件實(shí)現(xiàn)

<script setup lang="ts" name="ImagePreview">
import { computed } from "vue";

interface ImageProps {
	imageUrl: string | string[]; // 圖片地址 ==> 必傳
	imageFit?: "fill" | "contain" | "cover" | "none" | "scale-down"; // 圖片縮放方式 ==> 非必傳（默認(rèn)為 cover）
	imageLazy?: boolean; // 是否懶加載 ==> 非必傳（默認(rèn)為 true）
	height?: string; // 組件高度 ==> 非必傳（默認(rèn)為 150px）
	width?: string; // 組件寬度 ==> 非必傳（默認(rèn)為 150px）
	borderRadius?: string; // 組件邊框圓角 ==> 非必傳（默認(rèn)為 8px）
	rowGap?: string; // 組件行間距 ==> 非必傳（默認(rèn)為 10px）
}
// 接收父組件參數(shù)并設(shè)置默認(rèn)值
const props = withDefaults(defineProps<ImageProps>(), {
	imageUrl: "",
	imageFit: "cover",
	imageLazy: true,
	height: "150px",
	width: "150px",
	borderRadius: "8px",
	rowGap: "10px"
});

// 圖片列表
const imageList = computed<string[]>(() => {
	if (Array.isArray(props.imageUrl)) {
		return props.imageUrl;
	}
	return [props.imageUrl];
});
</script>

<template>
	<div class="image-list">
		<div v-for="(item, index) in imageList" :key="index">
			<el-image
				class="image-style"
				:src="item"
				hide-on-click-modal
				:initial-index="index"
				:preview-src-list="imageList"
				:lazy="imageLazy"
				:fit="imageFit"
				:z-index="99999"
				preview-teleported
			/>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.image-list {
	display: grid;
	grid-row-gap: v-bind(rowGap);
	grid-template-columns: repeat(auto-fill, v-bind(width));
	justify-content: space-between;
	.image-style {
		width: v-bind(width);
		height: v-bind(height);
		border-radius: v-bind(borderRadius);
	}
}
</style>

知識(shí)拓展

vue2使用v-viewer實(shí)現(xiàn)圖片預(yù)覽

v-viewer

用于圖片瀏覽的Vue組件，支持旋轉(zhuǎn)、縮放、翻轉(zhuǎn)等操作，基于viewer.js。

在Vue.js 2中使用v-viewer插件實(shí)現(xiàn)圖片預(yù)覽功能相對(duì)簡(jiǎn)單。v-viewer是一個(gè)Vue.js的圖片預(yù)覽插件，可以輕松實(shí)現(xiàn)圖片的放大、縮小和滑動(dòng)預(yù)覽等功能。以下是實(shí)現(xiàn)步驟：

安裝 v-viewer 插件：

在項(xiàng)目目錄下使用 npm 或 yarn 安裝 v-viewer 插件。

npm install v-viewer --save  
npm i -S viewerjs
# 或
yarn add v-viewer
yarn add  viewerjs

在 main.js 文件中引入和配置 v-viewer 插件：

這行放在：import App from './App.vue'; 之前
import Viewer from 'v-viewer';
 
import 'viewerjs/dist/viewer.css';
 
Vue.use(Viewer);
或者
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999, // 設(shè)置圖片預(yù)覽組件的層級(jí)，確保能在其他組件之上
  },
});

在需要預(yù)覽圖片的組件中使用 v-viewer 指令：

<template>
  <div>
    <!-- 點(diǎn)擊圖片觸發(fā)預(yù)覽 -->
    <img v-for="(image, index) in imageList" :key="index" :src="image" v-viewer />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        // 添加更多圖片鏈接
      ],
    };
  },
};
</script

也可以使用以下方法

<template>
  <div>
    <button type="button" class="button" @click="previewURL">URL Array</button>
  </div>
</template>
<script>
  export default {
    data() {
      sourceImageURLs: [
        'https://picsum.photos/200/200?random=1',
        'https://picsum.photos/200/200?random=2',
      ],
    },
    methods: {
      previewURL () {
        // 如果使用`app.use`進(jìn)行全局安裝, 你就可以像這樣直接調(diào)用`this.$viewerApi`
        const $viewer = this.$viewerApi({
          images: this.sourceImageURLs
        });
      },
    },
  };
</script>

在上面的代碼中，我們將 v-viewer 指令應(yīng)用在 img 標(biāo)簽上，這樣點(diǎn)擊圖片時(shí)會(huì)觸發(fā)預(yù)覽效果。