组件/Modal 模态框
通用组件

Modal 模态框

轻量级模态对话框

该页面由 AI 迁移生成,请谨慎使用

内容已迁移完成,但仍建议结合源码和人工评审结果使用。

Modal 模态框

用于简短任务或确认操作的模态窗口。

基础用法

模态框

点击按钮打开模态窗口。

示例即将加载...
<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <TxButton variant="primary" @click="open = true">打开模态框</TxButton>
  <TxModal v-model="open" title="快速操作">
    <p>在这里让用户完成一个小任务。</p>
    <template #footer>
      <TxButton variant="ghost" @click="open = false">取消</TxButton>
      <TxButton variant="primary" @click="open = false">确认</TxButton>
    </template>
  </TxModal>
</template>

API(Lite)

属性名类型默认值说明
modelValue是否显示
title标题
width内容宽度