当前位置：首页 > news >正文

Vue3/2 组件或元素宽高比固定时基于宽度自适应的一种思路

news 2024/10/30 7:55:40

🚀 个人简介：某大型国企资深软件研发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作者：码喽的自我修养🥰
📝 专栏：HTML5与CSS3 🎉

🌈 创作不易，如果能帮助到带大家，欢迎 收藏+关注 哦 💕

现实问题

我们在写Vue组件时，我们希望当组件的父级宽度一定时，组件能根据固定的宽高比例进行自适应，或者一些背景的自适应，以提高组件的复用性。

实现思路

在当前组件最外层元素设置ref。
组件Props中传入参数width（当传入值为100% 父级组件存在宽度时，高度即是自适应。），并通过一个computed变量和 v-bind 方法绑定至 最外层元素CSS 的 width中。
在组件的onMounted生命周期中通过 ref 获取当前组件的 clientWidth（此生命周期中，组件已渲染完毕）。再通过 ref 去修改 style 中的 height 达到一个宽高比固定的自适应。
Vue2无法使用 v-bind 绑定CSS变量，但是可通过一个 computed 计算出样式和 :style动态绑定样式中。

Vue3 + TS 实现代码

此样例中的 background 也是通过传入的两个变量计算渐变获得。

组件代码如下：

<template>
<!-- ref绑定 -->
<div ref="card" class="card-container"></div>
</template><style lang="scss" scoped>
.card-container {width: v-bind(width);  // 绑定widthborder-radius: 8px;background: v-bind(background);  // 绑定background
}
</style><script lang="ts" setup>
import { ref, onMounted, Ref, computed } from 'vue';const props = defineProps({// 传入高度width: {type: String,default: '200px'},// 背景渐变开始的颜色beginColor: {type: String,default: '#4996FF'},// 背景渐变结束的颜色，用于linear-gradientendColor: {type: String,default: '#358CFF'}
})// 绑定HTML元素
const card: Ref<null> | Ref<HTMLElement> = ref(null);// computed绑定传入宽度
const width =  computed(() => {return props.width;
})// computed 计算背景
const background = computed(() => {return `linear-gradient(104.37deg,${props.beginColor} 4.7%, ${props.endColor} 100%)`;
})onMounted(() => {if(!card.value ) return// 获取渲染完成的元素宽度const nowWidth = (card as Ref<HTMLElement>).value.clientWidth;// 更改元素高度，此处比例 16 ： 9(card as Ref<HTMLElement>).value.style.height = `${nowWidth / 16 * 9}px`;
})</script>

代码效果

测试代码：

<template>
<div class="width-fit-cards"><div v-for="(item,index) in 4" :style="{width: `${(index + 1) * 100}px`}" class="width-card" ><width-fit-card width="100%"/></div>
</div>
</template><style lang="scss" scoped>
.width-fit-cards {display: flex;.width-card + .width-card {margin-left: 20px;}
}
</style><script lang="ts" setup>
// 引入组件
import widthFitCard from './widthFitCard.vue';</script>

测试效果

Vue2怎么实现

Vue2通过以下代码绑定CSS样式：

 computed: {getCardStyle() {return {width: this.width}}}

<div :style="getCardStyle" ref="card" class="card-container">
</div>

具体可以自行实现

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家点点收藏+关注~💕

更多专栏订阅推荐：

🥕 JavaScript深入研究

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

🖼️ JavaScript基础

⭐️ uniapp与微信小程序

📝 前端工作常见问题与避坑指南

✍️ GIS地图与大数据可视化

📚 常用组件库与实用工具

💡 java入门到实战