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

现实问题

实现思路

Vue3 + TS 实现代码

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

组件代码如下：

<template>
<!-- ref绑定 -->
<div ref="card" class="card-container">

</div>
</template>

<style lang="scss" scoped>
.card-container {
    width: v-bind(width);  // 绑定width
    border-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-gradient
    endColor: {
        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>

具体可以自行实现