创建文件 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>