gree_leran/node_modules/uview-plus/components/u-overlay/u-overlay.vue

72 lines
2.1 KiB
Vue
Raw Normal View History

2024-06-14 01:11:29 +00:00
<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>