70 lines
1.6 KiB
Vue
70 lines
1.6 KiB
Vue
<template>
|
|
<view
|
|
v-if="inited"
|
|
class="l-overlay"
|
|
:class="[lClass, classes]"
|
|
:style="[styles, lStyle]"
|
|
@click.stop="onClick"
|
|
@touchmove.stop="noop"
|
|
@transitionend="finished"
|
|
:aria-role="ariaRole || 'button'"
|
|
:aria-label="ariaLabel || '关闭'">
|
|
<slot></slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
// @ts-nocheck
|
|
import { computed, defineComponent } from '@/uni_modules/lime-shared/vue';
|
|
import { useTransition, UseTransitionOptions, TransitionEmitStatus } from '@/uni_modules/lime-transition';
|
|
import overlayProps from './props';
|
|
|
|
export default defineComponent({
|
|
props: overlayProps,
|
|
emits: ['click', 'before-enter', 'enter', 'after-enter', 'before-leave', 'leave', 'after-leave'],
|
|
options: {
|
|
addGlobalClass: true,
|
|
virtualHost: true,
|
|
externalClasses: true,
|
|
},
|
|
externalClasses: ['l-class'],
|
|
setup(props, { emit }) {
|
|
|
|
const {inited, display, classes, finished} = useTransition({
|
|
defaultName: 'fade',
|
|
appear: props.visible,
|
|
emits: (name:TransitionEmitStatus) => { emit(name) },
|
|
visible: (): boolean => props.visible,
|
|
duration: props.duration,
|
|
} as UseTransitionOptions)
|
|
|
|
|
|
const styles = computed(() => ({
|
|
'transition-duration': props.duration + 'ms',
|
|
'background': props.bgColor,
|
|
'z-index': props.zIndex,
|
|
'display': !display.value ? 'none' : '',
|
|
}))
|
|
|
|
const onClick = () => {
|
|
emit('click', !props.visible)
|
|
}
|
|
const noop = (e) => {
|
|
e?.preventDefault();
|
|
return
|
|
}
|
|
|
|
return {
|
|
inited,
|
|
styles,
|
|
classes,
|
|
noop,
|
|
onClick,
|
|
finished
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="scss">
|
|
@import './index';
|
|
</style> |