TUI

<template>
  <div class="component-card-demo-wrap">
    <TsButton @click="showToastFn('原始提示', '')">原始提示</TsButton>
    <TsButton type="primary" @click="showToastFn('默认提示', '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' | '' = 'info') => {
  TsToast({
    message,
    type,
    offset: [0, 50],
  });
};
</script>

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

const showToastFn = (message: string, type: 'warning' | 'success' | 'error' | 'info' | '' = 'info') => {
  TsToast({
    message,
    type,
    icon: true,
    offset: [0, 50],
  });
};
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsButton @click="showToastFn('无圆角提示')">默认提示</TsButton>
    <TsButton type="primary" @click="showToastFn('圆角提示', 5)">圆角提示</TsButton>
  </div>
</template>
<script setup lang="ts">
import { TsButton, TsToast } from 'tui';

const showToastFn = (message: string, radius: number = 0) => {
  TsToast({
    message,
    radius,
    offset: [0, 50],
  });
};
</script>

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

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

const showToastFn = (message: string) => {
  TsToast({
    message,
    offset: [0, 50],
    position: activeKey.value as 'right' | 'center',
  });
};

</script>

<template>
  <div class="component-card-demo-wrap">
    <TsButton @click="showToastFnRight('从右侧滑入')">从右侧滑入</TsButton>
    <TsButton type="primary" @click="showToastFnScale('缩放动画效果')">缩放动画</TsButton>
  </div>
</template>

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

const showToastFnRight = (message: string) => {
  TsToast({
    message,
    offset: [0, 50],
    slideInRight: true,
    useSingleton: true,
  });
};

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

<template>
  <div class="component-card-demo-wrap">
    <TsButton @click="showToastFnDouble">堆叠效果（多条提示）</TsButton>
    <TsButton type="primary" @click="showToastFnWithIcon">带图标提示</TsButton>
    <TsButton type="primary" @click="showToastFnWithDelay">自定义延时提示（5秒）</TsButton>
  </div>
</template>
<script setup lang="ts">
import { TsButton, TsToast } from 'tui';

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>