问题分析

使用对话框组件时，弹出对话框时，点击以外的区域会导致对话框关闭

正确的用户体验应该是只有在点击关闭按钮或者是其他操作性按钮才能使得对话框状态变为关闭

解决方案

方案一：设置close-on-click-modal属性为false

注意：使用close-on-click-modal属性时，必须在该属性前加":"

方案二：可以通过before-close属性，在组件关闭时，让用户确认是否需要关闭

before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。

如果在 footer 具名 slot 插槽里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。

示例代码

方案一

<template>
  <div>
    <el-dialog
      title="提示"
      center
      :append-to-body="true"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
    >
      <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>
  </div>
</template>

<script>
export default {
  data() {
    return {
    	dialogVisible: false
    }
  },
  created() {
  },
  methods: {
    handleClose(done) {
      done()
    },
  },
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
复制代码

方案二

<template>
  <div>
    <el-dialog
      title="提示"
      center
      :append-to-body="true"
      :before-close="handleClose"
      :visible.sync="dialogVisible"
    >
      <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>
  </div>
</template>

<script>
export default {
  data() {
    return {
    	dialogVisible: false
    }
  },
  created() {
  },
  methods: {
    handleClose(done) {
      done()
    },
  },
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
复制代码