使用 Vue3 + TypeScript 实现图片预览组件

简介

在现代的 Web 应用中,图片预览是一个常见的需求。本文将介绍如何使用 Vue3 和 TypeScript 开发一个图片预览组件,支持展示单张或多张图片,并提供了丰富的配置选项。

组件功能

  • 支持单张或多张图片: 可以同时预览单张或多张图片,支持左右切换。
  • 自定义配置选项: 提供了丰富的配置选项,如图片缩放方式、懒加载、组件尺寸等。
  • 多张图片:无限循环预览,默认点击为首张,布局左右自适应父元素宽度,上下间距可通过参数(rowGap)控制。

组件实现

vue 复制代码
<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>

总结

通过使用 Vue3 和 TypeScript,我们可以轻松地开发出高度可定制的图片预览组件。这个组件可以帮助我们展示图片,提供了丰富的配置选项,以满足不同项目的需求。

希望本文能帮助你更好地理解如何开发图片预览组件!如果你有任何问题或建议,请随时提出。

相关推荐
人工智能训练师6 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny076 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy7 小时前
css的基本知识
前端·css
昔人'7 小时前
css `lh`单位
前端·css
Nan_Shu_6148 小时前
Web前端面试题(2)
前端
知识分享小能手9 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队10 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光10 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军10 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql52010 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js