You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

68 lines
1.9 KiB

<template>
<u-transition
:show="show"
custom-class="u-overlay"
:duration="duration"
:custom-style="overlayStyle"
@click="clickHandler"
>
<slot />
</u-transition>
</template>
<script>
import props from './props.js';
/**
* overlay 遮罩
* @description 创建一个遮罩层,用于强调特定的页面元素,并阻止用户对遮罩下层的内容进行操作,一般用于弹窗场景
* @tutorial https://www.uviewui.com/components/overlay.html
* @property {Boolean} show 是否显示遮罩(默认 false )
* @property {String | Number} zIndex zIndex 层级(默认 10070 )
* @property {String | Number} duration 动画时长,单位毫秒(默认 300 )
* @property {String | Number} opacity 不透明度值,当做rgba的第四个参数 (默认 0.5 )
* @property {Object} customStyle 定义需要用到的外部样式
* @event {Function} click 点击遮罩发送事件
* @example <u-overlay :show="show" @click="show = false"></u-overlay>
*/
export default {
name: "u-overlay",
mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
computed: {
overlayStyle() {
const style = {
position: 'fixed',
top: 0,
left: 0,
right: 0,
zIndex: this.zIndex,
bottom: 0,
'background-color': `rgba(0, 0, 0, ${this.opacity})`
}
return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
}
},
methods: {
clickHandler() {
this.$emit('click')
}
}
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
$u-overlay-top:0 !default;
$u-overlay-left:0 !default;
$u-overlay-width:100% !default;
$u-overlay-height:100% !default;
$u-overlay-background-color:rgba(0, 0, 0, .7) !default;
.u-overlay {
position: fixed;
top:$u-overlay-top;
left:$u-overlay-left;
width: $u-overlay-width;
height:$u-overlay-height;
background-color:$u-overlay-background-color;
}
</style>