TUI

<template>
  <TsButton @click="openBaseModal">打开模态框</TsButton>
  <TsModal v-model="baseModalVisible"></TsModal>
</template>
<script setup lang="ts">
  const baseModalVisible = ref(false);
  const openBaseModal = () => (baseModalVisible.value = true);
</script>

<template>
  <TsModal v-model="simpleModalVisible" title="This is a title" content="this is a modal"></TsModal>
</template>
<script setup lang="ts">
  const simpleModalVisible = ref(false);
  const openSimpleModal = () => (simpleModalVisible.value = true);
</script>

<template>
  <TsButton @click="openSlotModal">打开模态框</TsButton>
   <TsModal v-model="slotModalVisible">
    <template #title>
      <div class="modal-title">标题</div>
    </template>
    <template #content>
      <div class="modal-content">这是模态框的内容区域，可以放置文本或表单。</div>
    </template>
  </TsModal>
</template>
<script setup lang="ts">
  const slotModalVisible = ref(false);
  const openSlotModal = () => (slotModalVisible.value = true);
</script>

<template>
  <TsButton @click="openCloseSlotModal">打开模态框</TsButton>
  <TsModal v-model="closeSlotModalVisible" :showClose="true">
    <template #title>
      <div class="modal-title">带自定义关闭按钮</div>
    </template>
    <template #close>
      <TsButton type="danger" size="small" @click="closeSlotModalVisible = false">X</TsButton>
    </template>
    <template #content>
      <div class="modal-content">你可以通过自定义 close 插槽替换默认关闭按钮。</div>
    </template>
  </TsModal>
</template>
<script setup lang="ts">
  const closeSlotModalVisible = ref(false);
  const openCloseSlotModal = () => (closeSlotModalVisible.value = true);
</script>

<template>
  <TsButton @click="openFixedModal">打开模态框</TsButton>
  <TsModal v-model="fixedModalVisible" width="600px" height="300px" :fixed="true">
    <template #title>
      <div class="modal-title">大号模态框</div>
    </template>
    <template #content>
      <div class="modal-content">这是一个宽 600px，高 300px，并且固定在页面上的模态框。</div>
    </template>
  </TsModal>
</template>
<script setup lang="ts">
  const fixedModalVisible = ref(false);
  const openFixedModal = () => (fixedModalVisible.value = true);
</script>

<template>
  <TsButton @click="openForceModal">打开模态框</TsButton>
  <TsModal v-model="forceModalVisible" :closeOnClickMask="false" :showClose="false">
    <template #title>
      <div class="modal-title">强制交互</div>
    </template>
    <template #content>
      <div class="modal-content">你必须点击底部按钮、或者关闭图标才能关闭，而不是点击遮罩层。</div>
    </template>
    <template #footer>
      <TsButton @click="forceModalVisible = false">我觉得应该点取消</TsButton>
      <TsButton type="primary" @click="forceModalVisible = false">我知道了</TsButton>
    </template>
  </TsModal>
</template>
<script setup lang="ts">
  const forceModalVisible = ref(false);
  const openForceModal = () => (forceModalVisible.value = true);
</script>