72 lines
2.1 KiB
Vue
72 lines
2.1 KiB
Vue
<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';
|
||
import mpMixin from '../../libs/mixin/mpMixin';
|
||
import mixin from '../../libs/mixin/mixin';
|
||
import { addStyle, deepMerge } from '../../libs/function/index';
|
||
/**
|
||
* overlay 遮罩
|
||
* @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
|
||
* @tutorial https://ijry.github.io/uview-plus/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: [mpMixin, 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 deepMerge(style, addStyle(this.customStyle))
|
||
}
|
||
},
|
||
emits: ["click"],
|
||
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>
|