<template><XtfConfigProvider class="demo-theme-root" :theme="demoTheme"><view class="demo-page"><view class="demo-body"><text class="demo-title">Overlay</text><text class="demo-desc">遮罩点击只发送事件，由父级控制显示状态。</text><XtfButton label="显示遮罩" block @click="show = true" /><text class="demo-state">{{ status }}</text></view><XtfOverlay :show="show" :opacity="0.55" @click="closeOverlay"><view class="overlay-message" @tap="closeOverlay"><text class="overlay-message-text">点击任意区域关闭</text></view></XtfOverlay></view></XtfConfigProvider></template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { ref } from "vue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfOverlay from "@/uni_modules/xtf-linkuiunix/components/xtf-overlay/xtf-overlay.uvue"
const show = ref(false)
const status = ref("等待显示")
function closeOverlay(): void { status.value = "已点击遮罩"; show.value = false }
</script>
<style>.demo-page { display: flex; flex: 1; flex-direction: column; background-color: var(--xtf-color-page, #f1f5f9); }.demo-body { display: flex; flex-direction: column; padding: 32rpx; }.demo-title { color: var(--xtf-color-text, #0f172a); font-size: 48rpx; font-weight: 700; }.demo-desc { margin-top: 12rpx; margin-bottom: 32rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 26rpx; line-height: 1.5; }.demo-state { margin-top: 24rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 24rpx; }.overlay-message { display: flex; flex: 1; flex-direction: row; align-items: center; justify-content: center; }.overlay-message-text { color: #ffffff; font-size: 30rpx; }</style>
