对话框 Modal ​

<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="下面是基础演示属性,更多玩法请前往文档。"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex flex-row flex-wrap">
				<tm-button :margin="[0, 12]" @click="showWin = true" color="white" :width="120" :height="56" :font-size="24" label="默认"></tm-button>
				<tm-button
					:margin="[12, 12]"
					@click="showWin1 = true"
					color="red"
					:width="120"
					:height="56"
					:font-size="24"
					label="分离按钮"
				></tm-button>
				<tm-button
					:margin="[0, 12]"
					@click="showWin2 = true"
					color="orange"
					:width="120"
					:height="56"
					:font-size="24"
					label="个性化"
				></tm-button>
				<tm-button
					:margin="[12, 12]"
					@click="showWin3 = true"
					color="pink"
					:width="120"
					:height="56"
					:font-size="24"
					label="异步关闭"
				></tm-button>
			</view>

			<tm-modal title="插槽触发">
				<template v-slot:trigger>
					<tm-button
						block
						:margin="[12, 12]"
						:padding="[24, 0]"
						color="grey-1"
						:height="56"
						:font-size="24"
						label="通过插槽触发弹层"
					></tm-button>
				</template>
				<tm-text :font-size="32" label="这里通过插槽触发弹层,无需定义show变量来控制显示和隐藏."></tm-text>
			</tm-modal>
		</tm-sheet>
		<tm-sheet :margin="[32, 0]">
			<tm-text :font-size="24" _class="text-weight-b" label="下面是通过ref.open打开返回Promise示例。"></tm-text>
			<tm-divider></tm-divider>
			<view class="">
				<tm-button block @click="openDrawer" color="green" :font-size="28" label="Ref打开,返回Promise"></tm-button>
			</view>
		</tm-sheet>
		<tm-modal title="信息框" content="主体内容哦" v-model:show="showWin"></tm-modal>
		<tm-modal
			color="white"
			okColor="red"
			cancelColor="red"
			okLinear="left"
			splitBtn
			title="信息框"
			content="主体内容哦"
			v-model:show="showWin1"
		></tm-modal>
		<tm-modal
			ref="modal"
			color="grey-5"
			:height="500"
			:border="0"
			text
			okColor="black"
			cancelColor="white"
			linear="bottom"
			title="信息框"
			v-model:show="showWin2"
		>
			<view>
				<tm-input></tm-input>
				<tm-image src="https://picsum.photos/450/150" :height="150" :width="450"></tm-image>
				<tm-text
					label="主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦"
				></tm-text>
				<tm-image src="https://picsum.photos/450/150?id=36" :height="150" :width="450"></tm-image>
			</view>
		</tm-modal>
		<tm-modal
			closeable
			@ok="test"
			color="white"
			okColor="pink"
			cancelColor="pink"
			okLinear="left"
			splitBtn
			title="信息框"
			content="关闭后会延迟关闭窗体"
			v-model:show="showWin3"
			:beforeClose="beforeClose"
		></tm-modal>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, nextTick } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmInput from '@/tmui/components/tm-input/tm-input.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmModal from '@/tmui/components/tm-modal/tm-modal.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
import tmButton from '@/tmui/components/tm-button/tm-button.vue'
import tmImage from '@/tmui/components/tm-image/tm-image.vue'
const modal = ref<InstanceType<typeof tmModal> | null>(null)
uni.getSystemInfoSync()
const showWin = ref(false)
const showWin1 = ref(false)
const showWin2 = ref(false)
const showWin3 = ref(false)
function beforeClose() {
	return new Promise((res) => {
		setTimeout(() => {
			res(true)
		}, 1500)
	})
}

function test(e) {
	console.log('ok事件点击')
}
async function openDrawer() {
	modal.value
		?.open()
		?.then(() => {
			console.log('点了确认按钮')
			uni.showToast({ title: '确认按钮', icon: 'none' })
		})
		.catch(() => {
			console.log('取消关闭')
			uni.showToast({ title: '被关闭取消', icon: 'none' })
		})
}
</script>