图片/背景图的自适应 2.0版本(vue3)

@余秋

已于 2022-05-20 17:00:48 修改

阅读量968

点赞数

分类专栏： vue3 自适应图片/背景图文章标签： vue.js javascript 前端

于 2022-02-21 18:01:39 首次发布

本文链接：https://blog.csdn.net/qq_44777244/article/details/123052447

版权

自适应同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

图片/背景图

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

该博客介绍了如何创建一个名为RemImg.vue的Vue组件，用于处理图片和背景图的自适应显示。组件接受多个属性，如图片模式、自适应模式、宽度和高度设置等。在图片加载完成后，根据不同的自适应模式（px或rem）调整图片大小，并提供了插槽以支持内容自适应背景图片。示例展示了如何导入和使用该组件。

摘要由CSDN通过智能技术生成

创建文件 RemImg.vue

<template>
	<!-- 图片类型 -->
	<img 
		v-if="props.mode=='img'" 
		class="rem-img" ref="img" alt="#" 
		:src="props.src" :style="{width,height}" 
	/>
	<!-- 背景图类型 -->
	<div 
		v-else-if="props.mode=='bg'"	
		:style="{width,height,background:`url(${props.src}) center/100% 100% no-repeat`}"
	>
		<slot></slot>
	</div>
</template>

<script setup>
	import { onMounted, ref, watch } from 'vue'; //组合API

	const props = defineProps({ // 父组件传来的值
		src: {  // 图片路径
			type: String
		},
		mode: { // 模式 是 图片 还是 背景
			type: String,
			default: 'img'
		},
		remMode: { // 自适应模式 是 px 还是 rem 
			type:String,
			default:'rem'
		},
		isFullWidth:{ // 是否原尺寸宽度
			type: Boolean,
			default: false
		},
		isFullHeight:{ // 是否原尺寸高度
			type: Boolean,
			default: false
		}
	});

	const width = ref(0);
	const height = ref(0);

	watch(()=>props.src,(src)=>{ //监听 图片 的路径
		console.log(src)
	},{
		immediate:true,
		deep:true
	})

	onMounted(()=>{ // 生命周期
		const img = new Image()
		img.onload = () =>{ // 修改 图片大小 单位 px or rem

			switch(props.remMode){
				case 'px':
					width.value = img.naturalWidth + 'px'
					height.value = img.naturalHeight + 'px'
					break
				case 'rem':
					if(props.isFullWidth){
						width.value = img.naturalWidth + 'px'
						height.value = img.naturalHeight / 100 + 'rem'
					}else if(props.isFullHeight){
						width.value = img.naturalWidth  / 100 + 'rem'
				 		height.value = img.naturalHeight + 'px'
					}else{
						width.value = img.naturalWidth / 100 + 'rem'
						height.value = img.naturalHeight / 100 + 'rem'
					}
					break
			}
		} 

		watch(()=>props.src,(src)=>{ // 重置图片
			img.src = src
		},{
			immediate:true,
			deep:true
		})
		
	})
</script>

使用：

1. import RemImg from '_c/RemImg.vue';
2. <RemImg 
	:src="require('../assets/images/frame/rotate-bg.png')" 
	mode="bg" 
	remMode="rem"
   >
    <div>插槽自适应背景图片</div>
   </RemImg>