vue3el-dialog高度设置

Vue3 中的 `v-el-dialog` 是 Element UI 提供的一个轻量级的对话框组件，其高度可以通过几种方式设置：

1. **直接绑定样式**: 直接给 `<dialog>` 标签添加 `style` 属性，并设置 `height` 或者 `max-height` 属性。例如：

   <el-dialog :visible.sync="dialogVisible" style="height: 400px; max-height: 80%; overflow-y: auto;">
     <!-- 内容 -->
   </el-dialog>

2. **使用动态计算值**:
如果需要动态调整高度，可以基于数据变化来计算高度，比如依据内容长度或其他条件：

   data() {
     return {
       dialogHeight: 'auto', // 或者一个初始值
     }
   },
   methods: {
     updateDialogHeight() {
       this.dialogHeight = '50vh'; // 50% viewport height
     }
   }
   <el-dialog :visible.sync="dialogVisible" :style="{ height: dialogHeight }">
     <!-- 内容 -->
   </el-dialog>
   <button @click="updateDialogHeight">改变高度</button>

3. **响应式属性**:
可以通过 Vue 的 `v-bind:class` 或者 `v-bind:style` 结合计算属性来响应地设置高度：

   computed: {
     dialogStyle() {
       let height = /* 根据当前状态计算的高度 */;
       return { height };
     }
   },
   <el-dialog :visible.sync="dialogVisible" :style="dialogStyle">
     <!-- 内容 -->
   </el-dialog>