vue学习笔记 el-dialog 固定宽度

1、按比例显示
width=“30%”

<el-dialog
  title="提示"
  v-model="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息span>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定el-button>
    span>
  template>
el-dialog>

2 固定宽度(部分Element版本)
:width="‘500px’"，注意引号

<el-dialog
  title="提示"
  v-model="dialogVisible"
  :width="'500px'"
  :before-close="handleClose">
  <span>这是一段信息span>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定el-button>
    span>
  template>
el-dialog>

3 固定宽度(部分Element版本)
width=“500px”

<el-dialog
  title="提示"
  v-model="dialogVisible"
  width="500px"
  :before-close="handleClose">
  <span>这是一段信息span>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定el-button>
    span>
  template>
el-dialog>