vue2点击图标后弹出页面，背景变暗

这种效果可以使用 Vue.js 的动态绑定 class 和 style 来实现。

首先，需要在页面中添加一个蒙层元素，用于覆盖整个页面，并设置其初始样式为透明的。然后，当点击图标时，通过绑定一个变量，来控制蒙层元素的样式，使其变暗。

具体代码如下：

<template>
  <div>
    <!-- 点击图标时触发 showLayer 方法 -->
    <i class="iconfont" @click="showLayer">&#xe65c;</i>
    <!-- 绑定变量 isShowLayer，用于控制蒙层元素的显示和隐藏 -->
    <div :class="{ 'layer': true, 'show': isShowLayer }"></div>
  </div>
</template>

<style>
  .iconfont {
    font-family: 'iconfont';
    font-size: 20px;
    cursor: pointer;
  }
  .layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0; /* 初始透明度为 0 */
    transition: opacity 0.3s ease; /* 添加渐变效果 */
    z-index: 999;
  }
  .show {
    opacity: 1; /* 点击图标后将透明度设为 1，使蒙层元素变暗 */
  }
</style>

<script>
export default {
  data() {
    return {
      isShowLayer: false // 初始化时蒙层元素不显示
    }
  },
  methods: {
    showLayer() {
      this.isShowLayer = true; // 点击图标后显示蒙层元素
    }
  }
}
</script>

以上代码可以实现点击图标后弹出页面，并且背景变暗。