Vue3从0到1组件开发-基础组件：Mask

Mask：不要不在乎遮罩

Why is mask?

在一个完整的组件库中，抽出Mask作为一个单独的组件仍然是可有可无的一种处理方法。而将Mask暴露给开发者使用的似乎更少，多见于主攻移动端的UI库当中，如Vant、uniapp(下载插件) 等，而在主攻Web端的UI库当中则及其少见。当然也是因为Web端很少功能需要用到这类的组件。

此处所指的"完整的组件库"指能满足一个项目的基本功能需求的组件库。

但是在我所设想的组件库当中还是把它作为一个单独的组件库来开发，其中之一的原因在于我想把我的项目兼容移动端的平台，所以在为后面铺路。

并且Mask组件也是基础组件中比较有深度的一个组件了，除了正常的布局以外，还需要考虑比Button组件更复杂一点点的应用场景，例如点击事件、是否触发点击事件、禁止页面滚动，等一些小细节。

结构主体

前面提了个梗概，那么接下来，我们要做的就是用代码丰满它。

还是先把主要结构写出来。

<template lang="pug">
block content
div(
  v-if="isShow"
  class="yx-mask"
  @touchmove.stop.prevent="clear"
)
  div(
    class="yx-mask-class"
    :style="{backgroundColor: `${bgColor}`}"
    @click="cancel"
  )
    div(
      class="yx-mask__wrapper-box"
      @click="clear"
    )
      slot
</template>

尽管在基础组件中算是有点复杂点的组件了，但毕竟还是基础组件，所以结构还是停简单的，所以需要完成的事件也比较简单。

但是在完善事件之前，这里还是要贴一下它的css代码。毕竟有一部分的逻辑处理是涉及到了css部分的。

.yx-mask-class{
   
  position: fixed;
  left: 0; right: 0;
  top: 0; bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;