公司小程序
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.

69 lines
1.9 KiB

3 years ago
<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">
@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>