mView

Overlay 遮罩层

平台差异说明

App(vue)App(nvue)H5小程序
√×√√

基本使用

  • 通过show参数配置是否显示遮罩
  • 遮罩被点击时，会发送一个click事件
<template>
    <view>
        <m-cell-group border>
            <m-cell
                title="基本使用"
                is-link
                @click="handleClick"
            />
        </m-cell-group>

        <m-overlay
            :show="show"
            @click="show = false"
        />
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const show = ref(false)

const handleClick = index => {
    show.value = true
}
</script>

嵌入内容

通过默认插槽可以在遮罩层上嵌入任意内容 注意：如果不想让slot插槽内容的点击事件冒泡到遮罩，请给指定元素添加上@tap.stop

<m-overlay>
    <view @tap.stop>
        嵌入内容
    </view>
</m-overlay>

API

Props

参数说明类型默认值可选值
show是否显示遮罩Booleanfalsetrue
zIndexz-index层级Number | String10070-
duration动画时长，单位毫秒Number | String300-
opacity不透明度值，当做rgba的第四个参数Number | String0.5-
customStyle自定义样式Object--

Slot

名称说明
default遮罩层上方嵌入内容

Event

事件名说明回调参数
click点击遮罩发送此事件-