TUI

<template>
  <TsButton @click="showToastFn('', false)">原始提示（无圆角、无阴影）</TsButton>
  <TsButton type="primary" @click="showToastFn()">默认提示效果</TsButton>
  <TsButton type="warning" @click="showToastFn('warning')">警告提示</TsButton>
  <TsButton type="danger" @click="showToastFn('error')">错误提示</TsButton>
  <TsButton type="success" @click="showToastFn('success')">成功提示</TsButton>
</template>

<script setup lang="ts">
  import TsToast from '../../packages/components/TsToast';

  const showToastFn = (type = 'info', round = true) => {
    TsToast({
      message: '这只是一个简单的toast',
      offset: [0, 50],
      type,
      round,
    });
  };
</script>

<template>
  <TsButton @click="showToastFnRight">从右侧滑入</TsButton>
  <TsButton @click="showToastFnScale">缩放动画</TsButton>
</template>

<script setup lang="ts">
  import TsToast from '../../packages/components/TsToast';

  const showToastFnRight = () => {
    TsToast({
      message: '从右侧滑入的toast',
      offset: [0, 50],
      slideFromRight: true,
    });
  };

  const showToastFnScale = () => {
    TsToast({
      message: '缩放动画效果的toast',
      offset: [0, 50],
      scaleAnimate: true,
    });
  };
</script>

<template>
  <TsButton @click="showToastFnDouble">堆叠效果（多条提示）</TsButton>
  <TsButton @click="showToastFnWithIcon">带图标提示</TsButton>
  <TsButton @click="showToastFnWithDelay">自定义延时提示（3秒）</TsButton>
</template>

<script setup lang="ts">
  import TsToast from '../../packages/components/TsToast';

  const showToastFnDouble = () => {
    TsToast({
      message: '堆叠排序的toast',
      offset: [0, 50],
      useSingleton: false,
    });
  };

  const showToastFnWithIcon = () => {
    TsToast({
      message: '带图标的提示',
      offset: [0, 50],
      icon: true,
      type: 'success',
    });
  };

  const showToastFnWithDelay = () => {
    TsToast({
      message: '5秒后自动关闭',
      offset: [0, 50],
      duration: 5000,
      type: 'info',
    });
  };
</script>