Vue + Element UI 对话框外部呈锁定状态方案

曾经终败给现在 2023-10-11 16:47 44阅读 0赞

## 问题分析 ##

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

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

## 解决方案 ##

方案一：设置**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>