admin-vben5/apps/web-naive/src/views/demos/naive/index.vue
2024-08-06 10:02:48 +08:00

92 lines
2.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<script lang="ts" setup>
import type { NotificationType } from 'naive-ui';
import { NButton, NCard, NSpace, useMessage, useNotification } from 'naive-ui';
const notification = useNotification();
const message = useMessage();
function error() {
message.error('Once upon a time you dressed so fine');
}
function warning() {
message.warning('How many roads must a man walk down');
}
function success() {
message.success('Cause you walked hand in hand With another man in my place');
}
function loading() {
message.loading(
'If I were you, I will realize that I love you more than any other guy',
);
}
function notify(type: NotificationType) {
notification[type]({
content: '说点啥呢',
duration: 2500,
keepAliveOnHover: true,
meta: '想不出来',
});
}
</script>
<template>
<div class="p-5">
<div class="card-box p-5">
<h1 class="text-xl font-semibold">naive组件使用演示</h1>
<div class="text-foreground/80 mt-2">支持多语言主题功能集成切换等</div>
</div>
<div class="card-box mt-5 p-5">
<div class="mb-3">
<span class="text-lg font-semibold">按钮</span>
</div>
<div>
<NSpace>
<NButton>Default</NButton>
<NButton type="tertiary"> Tertiary </NButton>
<NButton type="primary"> Primary </NButton>
<NButton type="info"> Info </NButton>
<NButton type="success"> Success </NButton>
<NButton type="warning"> Warning </NButton>
<NButton type="error"> Error </NButton>
</NSpace>
</div>
</div>
<div class="card-box mt-5 p-5">
<div class="mb-3">
<span class="text-lg font-semibold">卡片</span>
</div>
<div>
<NCard title="卡片"> 卡片内容 </NCard>
</div>
</div>
<div class="card-box mt-5 p-5">
<div class="mb-3">
<span class="text-lg font-semibold">信息 Message </span>
</div>
<div class="flex gap-3">
<NButton type="error" @click="error"> 错误 </NButton>
<NButton type="warning" @click="warning"> 警告 </NButton>
<NButton type="success" @click="success"> 成功 </NButton>
<NButton type="primary" @click="loading"> 加载中 </NButton>
</div>
</div>
<div class="card-box mt-5 p-5">
<div class="mb-3">
<span class="text-lg font-semibold">通知 Notification </span>
</div>
<div class="flex gap-3">
<NButton type="error" @click="notify('error')"> 错误 </NButton>
<NButton type="warning" @click="notify('warning')"> 警告 </NButton>
<NButton type="success" @click="notify('success')"> 成功 </NButton>
<NButton type="primary" @click="notify('info')"> 加载中 </NButton>
</div>
</div>
</div>
</template>