59 lines
1.4 KiB
Vue
59 lines
1.4 KiB
Vue
<script lang="ts" setup>
|
|
import TnOverlay from '../../overlay/src/overlay.vue'
|
|
import TnIcon from '../../icon/src/icon.vue'
|
|
import { popupEmits, popupProps } from './popup'
|
|
import { usePopup, usePopupCustomStyle } from './composables'
|
|
|
|
const props = defineProps(popupProps)
|
|
defineEmits(popupEmits)
|
|
|
|
const {
|
|
iosDevice,
|
|
showOverlay,
|
|
showPopup,
|
|
visiblePopup,
|
|
onClickCloseBtn,
|
|
onClickOverlay,
|
|
} = usePopup(props)
|
|
const { ns, overlayZIndex, zIndex, popupContentClass, popupContentStyle } =
|
|
usePopupCustomStyle(props)
|
|
</script>
|
|
|
|
<template>
|
|
<view
|
|
v-if="!iosDevice || (iosDevice && visiblePopup)"
|
|
:class="[ns.b(), ns.is('show', showPopup), ns.is('visible', visiblePopup)]"
|
|
:style="{
|
|
zIndex,
|
|
}"
|
|
>
|
|
<!-- 遮罩层 -->
|
|
<TnOverlay
|
|
:show="showOverlay"
|
|
:z-index="overlayZIndex"
|
|
:opacity="overlayOpacity"
|
|
@click="onClickOverlay"
|
|
/>
|
|
|
|
<!-- 弹框内容 -->
|
|
<view :class="[popupContentClass]" :style="popupContentStyle">
|
|
<slot />
|
|
|
|
<!-- 关闭按钮 -->
|
|
<view
|
|
v-if="closeBtn"
|
|
:class="[ns.e('close-btn'), ns.em('close-btn', closeBtnPosition)]"
|
|
@tap.stop="onClickCloseBtn"
|
|
>
|
|
<slot name="closeBtn">
|
|
<TnIcon name="close" />
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../../../theme-chalk/src/popup.scss';
|
|
</style>
|