基于Vue3+TypeScript實現圖片預覽組件

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

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

簡介

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

組件功能

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

組件實現

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

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

知識拓展

vue2使用v-viewer實現圖片預覽

v-viewer

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

在Vue.js 2中使用v-viewer插件實現圖片預覽功能相對簡單。v-viewer是一個Vue.js的圖片預覽插件，可以輕松實現圖片的放大、縮小和滑動預覽等功能。以下是實現步驟：

安裝 v-viewer 插件：

在項目目錄下使用 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, // 設置圖片預覽組件的層級，確保能在其他組件之上
  },
});

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

<template>
  <div>
    <!-- 點擊圖片觸發(fā)預覽 -->
    <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`進行全局安裝, 你就可以像這樣直接調用`this.$viewerApi`
        const $viewer = this.$viewerApi({
          images: this.sourceImageURLs
        });
      },
    },
  };
</script>

在上面的代碼中，我們將 v-viewer 指令應用在 img 標簽上，這樣點擊圖片時會觸發(fā)預覽效果。