Vue项目中动态修改元素宽高的三种方式

#Vue项目中动态修改元素宽高的三种方式| 来源: 网络整理| 查看: 265

一般用于父组件动态变换宽高,子组件需要同步修改宽高，我这里是用在了一个ElementUi弹窗上面，当页面大小发生变化后，动态修改弹窗的大小，我试着通过deep函数修改el-dialog__body的高度，但是不好用，因为我的style上面加了scoped，但是呢，在el-dialog__body的div上却没有data的hash值绑定，所以导致样式不生效，所以要把style的scoped属性去掉才可以：

具体动态修改元素宽高的方法，大概有三种方式

1.绑定动态样式 // 在vue中添加动态变量： const leftShowWith = reactive({ with:'500px' }); // 动态修改宽度 leftShowWith.with = `${width}px`;

2.vue3中在style里使用v-bind绑定动态变量

详细可以看官方文档：Class 与 Style 绑定 | Vue.js

hello linge import { ref } from 'vue' const color = ref('red') .box { width: 100px; height: 100px; color: v-bind(color); }

3.使用calc动态计算

css 中可以使用 calc() 来动态设置宽高，但是，在表达式中运算符的前后必须要有空格

height:calc(100vh - 80px)

亲测这种方式还是很好用的：

【本文地址】

公司简介

联系我们