vue中使用elementui组件制作跟随鼠标移动的黑窗口

可以通过在`<el-dialog>`组件中设置`custom-class`属性来自定义对话框的样式，然后在样式中添加`position: fixed`和`transform: translate()`属性实现跟随鼠标移动的效果。

以下是示例代码：

<template>
  <div>
    <el-button @click="showDialog">打开对话框</el-button>
    <el-dialog
      :visible.sync="dialogVisible"
      :custom-class="'my-dialog'"
      :title="'跟随鼠标移动的黑窗口'"
      :width="'400px'"
      :close-on-click-modal="false"
    >
      <p>这是一段内容</p>
    </el-dialog>
  </div>
</template>

<style>
.my-dialog {
  position: fixed;
  transform: translate(-50%, -50%);
}
</style>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogStyle: {},
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
  },
  mounted() {
    document.addEventListener("mousemove", (e) => {
      if (this.dialogVisible) {
        this.dialogStyle = {
          left: e.clientX + "px",
          top: e.clientY + "px",
        };
      }
    });
  },
};
</script>

在上面的代码中，我们在`<el-dialog>`组件中设置了`custom-class`属性为`my-dialog`，并在样式中设置了`position: fixed`和`transform: translate(-50%, -50%)`属性。`transform: translate(-50%, -50%)`将对话框的中心点移动到鼠标位置。

然后我们在`mounted`钩子函数中监听`mousemove`事件，根据鼠标位置动态计算对话框的位置，并将计算结果赋值给`dialogStyle`对象，这样就可以实现对话框跟随鼠标移动的效果了。