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

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

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

1.绑定动态样式

<div ref= "div2" :style="{'width':leftShowWith.with}"></div>



// 在vue中添加动态变量：
const leftShowWith  = reactive({
  with:'500px'
});



// 动态修改宽度
leftShowWith.with = `${width}px`;

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

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

<template>
  <div class="box">hello linge</div>
</template>

<script setup>
import { ref } from 'vue'
const color = ref('red')
</script>
<style>
.box {
  width: 100px;
  height: 100px;
  color: v-bind(color);
}
</style>

3.使用calc动态计算 

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

height:calc(100vh - 80px)

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