Tui

<template>
  <div class="component-card-demo-wrap">
    <TsButton type="primary" @click="handleAlert">打开 alert</TsButton>
  </div>
</template>

<script setup lang="ts">
import { TsButton, TsMessageBox, TsToast } from 'tui';

const handleAlert = async () => {
  const result = await TsMessageBox.alert('这是一个基础提示弹窗。', '提示');
  TsToast({
    type: 'info',
    message: `alert 结果：${result.action}`,
    mode: 'singleton',
    position: 'right',
    offset: [0, 50],
  });
};
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsButton type="danger" @click="handleConfirm">删除确认</TsButton>
  </div>
</template>

<script setup lang="ts">
import { TsButton, TsMessageBox, TsToast } from 'tui';

const handleConfirm = async () => {
  const result = await TsMessageBox.confirm('删除后将无法恢复，是否继续？', '危险操作', {
    confirmButtonText: '确认删除',
    cancelButtonText: '我再想想',
    confirmButtonType: 'danger',
  });

  TsToast({
    type: result.action === 'confirm' ? 'success' : 'warning',
    message: result.action === 'confirm' ? '已确认删除（示例）' : `操作已取消（${result.action}）`,
    mode: 'singleton',
    position: 'right',
    offset: [0, 50],
  });
};
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsButton @click="handlePrompt">重命名</TsButton>
  </div>
</template>

<script setup lang="ts">
import { TsButton, TsMessageBox, TsToast } from 'tui';

const handlePrompt = async () => {
  const result = await TsMessageBox.prompt('请输入新的名称：', '重命名', {
    inputPlaceholder: '请输入 2~20 位名称',
    inputRequired: true,
    inputValidator: (value: string) => {
      if (value.trim().length < 2 || value.trim().length > 20) return '名称长度需在 2~20 位之间';
      return true;
    },
    confirmButtonText: '保存',
  });

  if (result.action !== 'confirm') {
    TsToast({
      type: 'warning',
      message: `重命名已取消（${result.action}）`,
      mode: 'singleton',
      position: 'right',
      offset: [0, 50],
    });
    return;
  }

  TsToast({
    type: 'success',
    message: `重命名成功：${result.value}`,
    mode: 'singleton',
    position: 'right',
    offset: [0, 50],
  });
};
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsButton @click="handleAdvanced">自定义参数</TsButton>
  </div>
</template>

<script setup lang="ts">
import { TsButton, TsMessageBox, TsToast } from 'tui';

const handleAdvanced = async () => {
  const result = await TsMessageBox({
    type: 'confirm',
    title: '发布确认',
    message: '当前版本将推送到生产环境，是否继续发布？',
    width: '520px',
    showClose: true,
    maskClosable: false,
    confirmButtonText: '确认发布',
    cancelButtonText: '取消发布',
    confirmButtonType: 'primary',
    beforeClose: async ({ source }) => {
      if (source === 'mask') {
        TsToast({
          type: 'info',
          message: '已禁用点击遮罩关闭',
          mode: 'singleton',
          position: 'right',
          offset: [0, 50],
        });
        return false;
      }
      return true;
    },
  });

  TsToast({
    type: result.action === 'confirm' ? 'success' : 'warning',
    message: `结果：${result.action}`,
    mode: 'singleton',
    position: 'right',
    offset: [0, 50],
  });
};
</script>