179 lines
3.6 KiB
Vue
179 lines
3.6 KiB
Vue
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 861 4 07 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||
<template>
|
||
<!-- #ifdef APP-NVUE -->
|
||
<view ref="fui_bd_ani" class="fui-backdrop__wrap"
|
||
:style="{background:background,position:absolute?'absolute':'fixed',width:absolute && full ?winWidth+'px':'100%',height:absolute && full ?winHeight+'px':'100%'}"
|
||
@tap.stop="handleClick">
|
||
<slot></slot>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
<view class="fui-backdrop__wrap" :class="{'fui-backdrop__bg':!background,'fui-backdrop__show':show}"
|
||
:style="{background:background,position:absolute?'absolute':'fixed',zIndex:zIndex}" @tap.stop="handleClick">
|
||
<slot></slot>
|
||
</view>
|
||
<!-- #endif -->
|
||
</template>
|
||
|
||
<script>
|
||
// #ifdef APP-NVUE
|
||
const animation = uni.requireNativePlugin('animation');
|
||
// #endif
|
||
export default {
|
||
name: "fui-backdrop",
|
||
emits: ['click'],
|
||
props: {
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
background: {
|
||
type: String,
|
||
// #ifdef APP-NVUE
|
||
default: 'rgba(0, 0, 0, 0.6)',
|
||
// #endif
|
||
|
||
// #ifndef APP-NVUE
|
||
default: ''
|
||
// #endif
|
||
},
|
||
//是否绝对定位，默认固定定位fixed
|
||
absolute: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
//absolute定位且组件在根目录下时是否铺满屏幕,仅nvue有效
|
||
full: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
zIndex: {
|
||
type: Number,
|
||
default: 980
|
||
},
|
||
closable: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
// #ifdef APP-NVUE
|
||
watch: {
|
||
show(val) {
|
||
if (val) {
|
||
this.openAni()
|
||
} else {
|
||
this.closeAni()
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
if (this.show) {
|
||
this._ani(true)
|
||
} else {
|
||
this._aniHidden(this.show)
|
||
}
|
||
}, 50)
|
||
})
|
||
},
|
||
data() {
|
||
return {
|
||
winWidth: 300,
|
||
winHeight: 600
|
||
}
|
||
},
|
||
created() {
|
||
let sys = uni.getSystemInfoSync()
|
||
this.winWidth = sys.windowWidth
|
||
this.winHeight = sys.windowHeight
|
||
},
|
||
// #endif
|
||
methods: {
|
||
// #ifdef APP-NVUE
|
||
openAni() {
|
||
this._aniHidden(true, () => {
|
||
this._ani(true)
|
||
})
|
||
},
|
||
closeAni(type) {
|
||
this._ani(false, () => {
|
||
this._aniHidden(false)
|
||
});
|
||
},
|
||
_ani(type, callback) {
|
||
let styles = {
|
||
opacity: type ? 1 : 0
|
||
};
|
||
if (!this.$refs['fui_bd_ani']) return;
|
||
animation.transition(
|
||
this.$refs['fui_bd_ani'].ref, {
|
||
styles,
|
||
duration: 200, //ms
|
||
timingFunction: 'ease-in',
|
||
needLayout: false,
|
||
delay: 0 //ms
|
||
},
|
||
() => {
|
||
callback && callback()
|
||
}
|
||
);
|
||
},
|
||
_aniHidden(isShow, callback) {
|
||
if (!this.$refs['fui_bd_ani']) return;
|
||
let styles = {
|
||
transform: isShow ? 'translateX(0px)' : 'translateX(-1500px)'
|
||
};
|
||
animation.transition(
|
||
this.$refs['fui_bd_ani'].ref, {
|
||
styles,
|
||
duration: 0,
|
||
needLayout: false,
|
||
delay: 0
|
||
},
|
||
() => {
|
||
callback && callback()
|
||
}
|
||
);
|
||
},
|
||
// #endif
|
||
handleClick() {
|
||
if (this.closable && this.show) {
|
||
this.$emit('click')
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.fui-backdrop__wrap {
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
visibility: hidden;
|
||
transition: all 0.3s;
|
||
opacity: 0;
|
||
/* #endif */
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* #ifdef APP-NVUE */
|
||
opacity: 0.001;
|
||
/* #endif */
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.fui-backdrop__bg {
|
||
background: var(--fui-bg-color-mask, rgba(0, 0, 0, 0.6)) !important;
|
||
}
|
||
|
||
.fui-backdrop__show {
|
||
visibility: visible !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
/* #endif */
|
||
</style> |