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

现实问题

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

实现思路

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

Vue3 + TS 实现代码

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

组件代码如下：

代码效果

测试代码：

测试效果

测试效果.png

Vue2

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

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

具体可以自行实现