You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.1 KiB
70 lines
2.1 KiB
<script setup>
|
|
const { $toast } = useNuxtApp();
|
|
|
|
const notifyAll = () => {
|
|
$toast('这是一条默认消息', { type: 'default' });
|
|
$toast.info('这是一条 info 消息');
|
|
$toast.success('这是一条 success 消息');
|
|
$toast.warning('这是一条 warning 消息');
|
|
$toast.error('这是一条 error 消息');
|
|
$toast.loading('加载中...');
|
|
};
|
|
|
|
const notifyDefault = () => $toast('默认消息 default');
|
|
const notifyInfo = () => $toast.info('Info 消息');
|
|
const notifySuccess = () => $toast.success('Success 消息');
|
|
const notifyWarning = () => $toast.warning('Warning 消息');
|
|
const notifyError = () => $toast.error('Error 消息');
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-8 flex flex-col gap-4 max-w-md">
|
|
<h1 class="text-2xl font-semibold mb-4">Toast 测试</h1>
|
|
|
|
<button
|
|
class="px-4 py-2 bg-[#cc785c] text-white rounded-lg hover:bg-[#a9583e] transition-colors"
|
|
@click="notifyAll"
|
|
>
|
|
全部类型
|
|
</button>
|
|
|
|
<div class="flex gap-2 flex-wrap">
|
|
<button
|
|
class="px-4 py-2 bg-[#efe9de] border border-[#e6dfd8] rounded-lg hover:bg-[#e8e0d2] transition-colors"
|
|
@click="notifyDefault"
|
|
>
|
|
Default
|
|
</button>
|
|
<button
|
|
class="px-4 py-2 bg-[#5db8a6] text-white rounded-lg hover:opacity-90 transition-opacity"
|
|
@click="notifyInfo"
|
|
>
|
|
Info
|
|
</button>
|
|
<button
|
|
class="px-4 py-2 bg-[#5db872] text-white rounded-lg hover:opacity-90 transition-opacity"
|
|
@click="notifySuccess"
|
|
>
|
|
Success
|
|
</button>
|
|
<button
|
|
class="px-4 py-2 bg-[#e8a55a] text-white rounded-lg hover:opacity-90 transition-opacity"
|
|
@click="notifyWarning"
|
|
>
|
|
Warning
|
|
</button>
|
|
<button
|
|
class="px-4 py-2 bg-[#c64545] text-white rounded-lg hover:opacity-90 transition-opacity"
|
|
@click="notifyError"
|
|
>
|
|
Error
|
|
</button>
|
|
<button
|
|
class="px-4 py-2 bg-[#181715] text-white rounded-lg hover:opacity-90 transition-opacity"
|
|
@click="$toast.loading('加载中...')"
|
|
>
|
|
Loading
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|