dialog弹窗的用法

这是Element-ui下的代码:

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  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>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

view视图:

 title对应的是头部

这是一段信息是一个默认插槽，对应中间显示的内容

slot-footer是一个具名插槽,对应的是尾部的内容。

width:对应的是弹窗的宽度，可以是一个具体的值。

实际的应用

标题为新增弹窗，内容为表单，底部为按钮。

代码：

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button
    >
    <!-- title控制头部的标题 -->
    <el-card>
      <el-dialog
        title="新增弹窗"
        :visible.sync="dialogVisible"
        width="500px"
        :before-close="handleClose"
      >
        <!-- 默认插槽中间要显示的内容 -->
        <el-form label-width="50px">
          <el-form-item label="姓名">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input></el-input>
          </el-form-item>
        </el-form>
        <!-- 具名插槽 -->
        <template #footer>
          <div style="text-align: center">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >确 定</el-button
            >
          </div>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
  },
};
</script>

label-width是表单元素控制表单的距离。

Close关闭弹窗

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button
    >
    <!-- title控制头部的标题 -->
    <el-card>
      <el-dialog
        title="新增弹窗"
        :visible.sync="dialogVisible"
        width="500px"
        :before-close="handleClose"
        @close="closeEvent"
      >
        <!-- 默认插槽中间要显示的内容 -->
        <el-form label-width="50px">
          <el-form-item label="姓名">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input></el-input>
          </el-form-item>
        </el-form>
        <!-- 具名插槽 -->
        <template #footer>
          <div style="text-align: center">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >确 定</el-button
            >
          </div>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    closeEvent() {
      console.log("关闭弹窗触发");
    },
  },
};
</script>

在加了@close事件后,当关闭弹窗会触发。

 可以在这里清空表单验证和清空表单的内容。

代码：

  closeEvent() {
      // 重置表单数据清空表单验证
      this.$refs.form.resetFields()
      this.form = {
        username: '', //	string	非必须		姓名
        mobile: '', //	string	非必须		手机号
        formOfEmployment: '', // number	非必须		聘用形式
        workNumber: '', //	string	非必须		工号
        departmentName: '', //	string	非必须		组织名称
        timeOfEntry: '', // string	非必须		入职时间
        correctionTime: '' //	string	非必须		转正时间
      }
    }