Tui

<template>
  <div class="component-card-demo-wrap">
    <TsButton @click="showToastFn('默认类型提示', '')">默认类型提示</TsButton>
    <TsButton type="primary" @click="showToastFn('INFO提示', 'info')">info提示</TsButton>
    <TsButton type="warning" @click="showToastFn('警告提示', 'warning')">警告提示</TsButton>
    <TsButton type="danger" @click="showToastFn('错误提示', 'error')">错误提示</TsButton>
    <TsButton type="success" @click="showToastFn('成功提示', 'success')">成功提示</TsButton>
  </div>
</template>
<script setup lang="ts">
import { TsButton, TsToast } from 'tui';

const showToastFn = (message: string, type: 'warning' | 'success' | 'error' | 'info' | '') => {

  TsToast({
    message,
    type,
    offset: [0, 50],
    duration:100000
  });
};
</script>

<template>
  <div>
    <div style="margin-bottom: 20px">
      <TsSwitchTabs :tabs="tabList" v-model="activeKey" layout="scrollable" variant="card" />
    </div>
    <div class="component-card-demo-wrap">
      <TsButton @click="showToastFn('不同位置的提示', 3)">不同位置的简单的提示</TsButton>
      <TsButton type="primary" @click="showToastFn('圆角提示', 8)">圆角提示</TsButton>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { TsSwitchTabs, TsButton, TsToast } from 'tui';

const tabList = [
  {
    name: '居中位置',
    key: 'center',
  },
  {
    name: '右侧位置',
    key: 'right',
  },
];
const activeKey = ref('center');

const showToastFn = (message: string, radius: number) => {
  TsToast({
    message,
    radius,
    offset: [0, 50],
    mode: 'stack',
    type: 'info',
    position: activeKey.value as 'right' | 'center',
  });
};
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsButton @click="showSingletonToast('fade-right 进入动画', 'fade-right')">淡入动画</TsButton>
    <TsButton type="primary" @click="showSingletonToast('slide-right 进入动画', 'slide-right')">滑入动画</TsButton>
    <TsButton type="primary" @click="showSingletonToast('scale 缩放动画', 'scale')">缩放动画</TsButton>
  </div>
</template>

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

const showSingletonToast = (message: string, animation: 'fade-right' | 'slide-right' | 'scale') => {
  TsToast({
    message,
    offset: [0, 50],
    mode: 'singleton',
    position: 'right',
    animation,
  });
};
</script>

<template>
  <div class="toast-more-demo">
    <div class="demo-block">
      <div class="demo-title">center / stack 队列模式</div>
      <div class="component-card-demo-wrap">
        <TsButton @click="pushCenterStack('center stack：新增一条提示', 'info')">新增一条</TsButton>
        <TsButton type="success" @click="pushCenterStackBatch">连续三条</TsButton>
      </div>
    </div>

    <div class="demo-block">
      <div class="demo-title">right / singleton 动画模式</div>
      <div class="component-card-demo-wrap">
        <TsButton type="primary" @click="showSingletonToast('fade-right')">fade-right</TsButton>
        <TsButton type="warning" @click="showSingletonToast('slide-right')">slide-right</TsButton>
        <TsButton type="success" @click="showSingletonToast('scale')">scale</TsButton>
        <TsButton @click="showSingletonToast(false)">无动画</TsButton>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { TsButton, TsToast } from 'tui';

const pushCenterStack = (message: string, type: 'warning' | 'success' | 'error' | 'info' | '' = 'info') => {
  TsToast({
    message,
    offset: [0, 50],
    mode: 'stack',
    position: 'center',
    type,
  });
};

const pushCenterStackBatch = () => {
  const queue = [
    { message: '第 1 条：创建任务成功', type: 'success' as const },
    { message: '第 2 条：同步进行中', type: 'info' as const },
    { message: '第 3 条：请关注耗时波动', type: 'warning' as const },
  ];
  queue.forEach((item, index) => {
    setTimeout(() => {
      pushCenterStack(item.message, item.type);
    }, index * 180);
  });
};

const showSingletonToast = (animation: false | 'fade-right' | 'slide-right' | 'scale') => {
  TsToast({
    message: `right singleton：${animation || 'none'}（${Date.now()}）`,
    offset: [0, 50],
    mode: 'singleton',
    position: 'right',
    animation,
    duration: 2800,
    type: 'info',
  });
};
</script>
<style scoped>
.toast-more-demo {
  display: grid;
  gap: 16px;
}

.demo-block {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--ts-border-color, #e5e7eb);
}

.demo-title {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
}
</style>