为el-dialog组件添加失焦关闭的功能

要为 el-dialog 组件添加失焦关闭的功能，你可以在 el-dialog 的外层包裹一个遮罩层元素，当遮罩层被点击时触发关闭事件。具体实现步骤如下：

1. 在 el-dialog 的外层添加一个遮罩层元素，可以使用 div 元素来实现。

2. 给遮罩层元素添加样式，使其全屏覆盖 el-dialog 组件，并设置透明度和 z-index 属性。

3. 给遮罩层元素添加点击事件，当被点击时触发关闭 el-dialog 的事件。

下面是示例代码：

<template>
  <div class="dialog-mask" @click="closeDialog"></div>
  <el-dialog :visible.sync="dialogVisible">
    <!-- dialog content -->
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    closeDialog() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style scoped>
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
</style>

在这个示例中，我们使用了一个 div 元素来作为遮罩层，并为其添加了一个名为 dialog-mask 的样式类。当遮罩层被点击时，会触发 closeDialog 方法来关闭 el-dialog 组件。注意，在 el-dialog 中我们绑定了一个 visible.sync 属性，这样就可以通过修改 dialogVisible 来控制 el-dialog 的显示与隐藏了。