点我扫二维码，查看demo

# Mask 弹出层

# 介绍

弹层组件，可定制内容

# 引入

通过一下方式来全局注册组件。更多注册方式敬请期待。

import Vue from 'vue';
import { Mask } from '@dolphin-iot/ui'

Vue.use(Mask);

1
2
3
4

# 代码演示

# 基础用法

通过 img 参数设置活动图片。

<template>
<div>
    <mx-cell title="弹出Mask" type="link" @click="show=true" />
    <mx-mask :show="show" :img="require('../../../assets/img/activity.jpg')" @close="show=!show" @img-click="onImgClick" />
</div>
</template>
<script>
export default{
    data(){
        return {
            show:false
        }
    },
    methods:{
        onImgClick(e){
            console.log('click image')
        }
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Api

# Props

参数	说明	类型	默认值	是否必须
show	是否显示弹出层	boolean	`false`	`-`
overlay	是否显示遮罩层	boolean	`true`	`-`
z-index	弹出层在z轴的序号	number	`1030`	`-`
lock-scroll	是否锁定背景滚动	boolean	`true`	`-`
duration	弹出层以及遮罩层动画时长（秒为单位）	number	`0.36`	`-`
overlay-style	遮罩层自定义样式	object	`-`	`-`
close-on-click-overlay	是否在点击遮罩层后关闭	boolean	`true`	`-`
img	活动图片链接	string	`-`	`是`

# Events

事件名称	说明	回调参数
close	关闭时触发	e: boolean
img-click	点击活动图片时触发	e: Event

← Loading 加载 NoticBar 通知栏 →