vue+element实现 点击页面某个模块 该模块放大 至中间位置 另外页面加个遮罩层

在 Vue.js 结合 Element UI 实现点击页面某个模块放大并居中，同时显示遮罩层，可以按照以下步骤操作：

1. 首先，在你的项目里安装 Element UI：运行 `npm install element-ui` 或者 `yarn add element-ui`。

2. 引入需要的 Element UI 组件：在 main.js 中引入 Element UI 和样式，并全局注册组件：

import { ElAlert, ElMask } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElAlert);
Vue.prototype.$mask = ElMask;

3. 创建一个自定义组件（例如叫 `ZoomModule`），用于显示模块和处理放大效果：

<template>
  <div ref="module" @click="toggleZoom" class="module">
    <!-- 模块内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    toggleZoom() {
      this.isZoomed = !this.isZoomed; // 添加一个 isZoomed 数据属性来控制是否放大
      if (this.isZoomed) {
        this.$refs.module.style.transform = 'scale(1.5)';
        // 将模块移动到视口中央，假设你有一个窗口宽度和高度的计算方法
        const windowWidth = document.documentElement.clientWidth;
        const windowHeight = document.documentElement.clientHeight;
        const moduleRect = this.$refs.module.getBoundingClientRect();
        const x = (windowWidth - moduleRect.width) / 2;
        const y = (windowHeight - moduleRect.height) / 2;
        this.$refs.module.style.position = 'absolute';
        this.$refs.module.style.left = `${x}px`;
        this.$refs.module.style.top = `${y}px`;
      } else {
        this.$refs.module.style.transform = 'scale(1)';
        this.$refs.module.style.position = '';
      }
    },
  },
};
</script>

4. 在需要放置模块的父组件中，使用这个自定义组件并添加遮罩层（遮罩层可以用 Element 的 `<el-mask>` 组件实现）：

<template>
  <el-alert v-if="showMask" :visible.sync="showMask" placement="center" type="info">加载中...</el-alert>
  <ZoomModule :isZoomed="isZoomed"></ZoomModule>
</template>

<script>
export default {
  data() {
    return {
      showMask: false,
      isZoomed: false,
    };
  },
  watch: {
    isZoomed(value) {
      this.showMask = value;
    },
  },
};
</script>

当你点击模块时，模块会放大并居中，同时如果 `isZoomed` 为 true，遮罩层会显示。当取消放大时，遮罩层和位置调整都会消失。