WU-UIOverlay
Create a mask layer to emphasize specific page elements and prevent users from operating the content under the mask. It is generally used in pop-up window scenarios. All related pop-up window components of wu-ui use this component.
Platform compatibility
| App(vue) | App(nvue) | H5 | 小程序 | VUE2 | VUE3 |
|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ |
Basic usage
- Configure whether to display the mask through the
showparameter - When the mask is clicked, a
clickevent will be sent. If this event is not needed, please set themask-click-ableparameter tofalse
vue
<template>
<wu-overlay :show="show" @click="show = false"></wu-overlay>
</template>
<script>
export default {
data() {
return {
show: true
}
}
}
</script><template>
<wu-overlay :show="show" @click="show = false"></wu-overlay>
</template>
<script>
export default {
data() {
return {
show: true
}
}
}
</script>Embed content
Default slots allow you to embed arbitrary content on the mask layer
Note: If you do not want the click event of the slot slot content to bubble up to the mask, please add @tap.stop to the specified element.
vue
<template>
<wu-overlay :show="show" @click="show = false">
<view class="warp">
<view class="rect" @tap.stop></view>
</view>
</wu-overlay>
</template>
<script>
export default {
data() {
return {
show: true
}
}
}
</script>
<style scoped>
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rect {
width: 120px;
height: 120px;
background-color: #fff;
}
</style><template>
<wu-overlay :show="show" @click="show = false">
<view class="warp">
<view class="rect" @tap.stop></view>
</view>
</wu-overlay>
</template>
<script>
export default {
data() {
return {
show: true
}
}
}
</script>
<style scoped>
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rect {
width: 120px;
height: 120px;
background-color: #fff;
}
</style>Mask style
- Use
durationto set the duration of mask fade in and out, unitms
vue
<wu-overlay :show="show" :duration="400" :z-index ="999" :opacity="0.3"></wu-overlay><wu-overlay :show="show" :duration="400" :z-index ="999" :opacity="0.3"></wu-overlay>API
Popup Props
| Property name | Description | Type | Default value | Optional value |
|---|---|---|---|---|
| show | Whether to display the mask | Boolean | false | true / false |
| zIndex | z-index value of the pop-up layer | Number | String | 10075 |
| duration | animation duration, unit ms | String / Number | 300 | - |
| opacity | opacity value, used as the fourth parameter of rgba | String / Number | 0.5 | - |
Popup Events
| Event name | Description | Callback parameters |
|---|---|---|
| click | Click the mask to send this event | - |
Popup Slots
| Slot Name | Description |
|---|---|
| default | The default slot for embedding content above the mask layer |