当前位置: 首页 > 文档资料 > FeArt 中文文档 >

Mask 蒙层

优质
小牛编辑
133浏览
2023-12-01

使用指南

组件介绍

提供一个好用的遮罩层

引入方式

import { Mask } from "feart";
components:{
  'fe-mask':Mask
}

代码演示

默认 Mask

<div class="fe-center">
  <fe-mask v-model="type" class-name="box-mask" @onClickMask="onClickMask" />
</div>

默认有背景的 Mask

<div class="fe-center">
  <fe-mask mask v-model="type" class-name="box-mask" @onClickMask="onClickMask" />
</div>

有内部内容的 Mask

<fe-mask mask v-model="type2" @onClickMask="type2 = false">
  <div class="mask">
    <div class="mask-inner"></div>
  </div>
</fe-mask>

API

参数 说明 类型 默认值
mask 是否显示背景色 Boolean false
z-index z-index 层级 Number String 1
forbidClick 是否禁止点击 Boolean false
class-name 自定义 className String -
class-style 自定义样式 Object -
- - - -

Events

事件名 参数 说明 备注
on-click-mask - 点击背景时触发 -
- - - -

Slots

Slot 名 说明 备注
default 内容 -