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 | 内容 | - |