uni-popup组件，通过maskClick事件点击遮罩层触发

要使用 `uni-popup` 组件，并通过 `maskClick` 事件来点击遮罩层触发事件，你可以按照以下步骤进行实现：

1. 在你的 Vue 组件中，引入 `uni-popup` 组件。

<template>
  <view>
    <uni-popup v-model="popupVisible" @maskClick="handleMaskClick">
      <!-- 弹窗内容 -->
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from '@/uni-ui/uni-popup/uni-popup.vue'

export default {
  components: {
    uniPopup
  },
  data() {
    return {
      popupVisible: false
    }
  },
  methods: {
    handleMaskClick() {
      // 处理点击遮罩层的逻辑
      console.log('点击了遮罩层')
    }
  }
}
</script>

在这个示例中，我们首先引入了 `uni-popup` 组件并注册为 `uniPopup`，然后在模板中使用 `<uni-popup>` 标签来创建弹窗。我们通过使用 `v-model` 指令来控制弹窗的显示与隐藏，通过绑定 `popupVisible` 变量实现双向绑定。同时，我们监听了 `maskClick` 事件，并在 `handleMaskClick` 方法中处理点击遮罩层的逻辑。

2. 当需要显示弹窗时，将 `popupVisible` 设置为 `true`，弹窗会显示出来；当需要隐藏弹窗时，将 `popupVisible` 设置为 `false`。

<template>
  <view>
    <button @click="showPopup">显示弹窗</button>

    <uni-popup v-model="popupVisible" @maskClick="handleMaskClick">
      <!-- 弹窗内容 -->
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      popupVisible: false
    }
  },
  methods: {
    showPopup() {
      this.popupVisible = true
    },
    handleMaskClick() {
      // 处理点击遮罩层的逻辑
      console.log('点击了遮罩层')
    }
  }
}
</script>

通过以上实现，当点击 "显示弹窗" 的按钮时，`popupVisible` 的值会被设置为 `true`，弹窗会显示出来。当点击遮罩层时，会触发 `maskClick` 事件并调用 `handleMaskClick` 方法，你可以在该方法中处理点击遮罩层的逻辑。