el-dialog 设置遮罩范围

el-dialog 组件的遮罩范围可以通过设置其属性 `lock-scroll` 来实现。当 `lock-scroll` 属性设置为 true 时，遮罩会覆盖整个页面，防止用户在 dialog 弹窗出现时滚动页面。当 `lock-scroll` 属性设置为 false 时，遮罩只会覆盖 dialog 弹窗所在的区域。

下面是一个示例代码，展示了如何设置 el-dialog 的遮罩范围：

<template>
  <div>
    <el-button type="primary" @click="showDialog">显示 Dialog</el-button>
    <el-dialog
      :visible.sync="dialogVisible"
      :lock-scroll="true"
    >
      <span>这是一个 Dialog 弹窗</span>
    </el-dialog>
  </div>
</template>

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

在上面的代码中，当点击按钮时，会显示一个带有遮罩的 el-dialog 弹窗。通过设置 `:lock-scroll="true"`，遮罩将会覆盖整个页面。你可以根据自己的需求来设置 `lock-scroll` 属性来控制遮罩的范围。