86 lines
2.4 KiB
Vue
86 lines
2.4 KiB
Vue
<template>
|
||
<uv-transition
|
||
:show="show"
|
||
mode="fade"
|
||
custom-class="uv-overlay"
|
||
:duration="duration"
|
||
:custom-style="overlayStyle"
|
||
@click="clickHandler"
|
||
@touchmove.stop.prevent="clear"
|
||
>
|
||
<slot />
|
||
</uv-transition>
|
||
</template>
|
||
|
||
<script>
|
||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||
import props from './props.js';
|
||
|
||
/**
|
||
* overlay 遮罩
|
||
* @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
|
||
* @tutorial https://www.uvui.cn/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 <uv-overlay :show="show" @click="show = false"></uv-overlay>
|
||
*/
|
||
export default {
|
||
name: "uv-overlay",
|
||
emits: ['click'],
|
||
mixins: [mpMixin, mixin, props],
|
||
watch: {
|
||
show(newVal){
|
||
// #ifdef H5
|
||
if(newVal){
|
||
document.querySelector('body').style.overflow = 'hidden';
|
||
}else{
|
||
document.querySelector('body').style.overflow = '';
|
||
}
|
||
// #endif
|
||
}
|
||
},
|
||
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 this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
|
||
}
|
||
},
|
||
methods: {
|
||
clickHandler() {
|
||
this.$emit('click')
|
||
},
|
||
clear() {}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
/* #ifndef APP-NVUE */
|
||
$uv-overlay-top:0 !default;
|
||
$uv-overlay-left:0 !default;
|
||
$uv-overlay-width:100% !default;
|
||
$uv-overlay-height:100% !default;
|
||
$uv-overlay-background-color:rgba(0, 0, 0, .7) !default;
|
||
.uv-overlay {
|
||
position: fixed;
|
||
top:$uv-overlay-top;
|
||
left:$uv-overlay-left;
|
||
width: $uv-overlay-width;
|
||
height:$uv-overlay-height;
|
||
background-color:$uv-overlay-background-color;
|
||
}
|
||
/* #endif */
|
||
</style>
|