【若依前后端分离】对话框/模态框el-dialog设置

在Vue.js中使用Element UI库时，可以通过el-dialog组件来创建模态框。以下是如何设置el-dialog的基本示例：

<template>
  <el-button @click="dialogVisible = true">打开对话框</el-button>
  <el-dialog
    :visible.sync="dialogVisible"
    title="提示"
    width="30%"
    :before-close="handleClose">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleClose(done) {
      // 可以在这里编写关闭前的逻辑，比如用户确认保存数据等
      done();
    },
  },
};
</script>

在这个例子中，我们定义了一个名为dialogVisible的数据属性，用于控制对话框的显示与隐藏。通过点击按钮来设置dialogVisible为true，从而打开对话框。el-dialog的title属性设置了对话框的标题，width属性设置了对话框的宽度。before-close属性用于定义关闭前的行为，可以在handleClose方法中实现，比如提示用户保存数据等。

确保在使用el-dialog时已经正确安装并导入了Element UI库。