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

现实问题

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

实现思路

  1. 在当前组件最外层元素设置ref
  2. 组件Props中传入参数width(当传入值为100% 父级组件存在宽度时,高度即是自适应。),并通过一个computed变量和v-bind方法绑定至最外层元素CSSwidth中。
  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
            }
        }
    }

具体可以自行实现

你可能感兴趣的:(Vue3/2 组件宽高比固定时基于宽度自适应的一种思路)