mod: base demo
This commit is contained in:
张传龙
parent
b0e3a94e12
commit
31670cd671
@ -1,19 +0,0 @@
|
||||
<template>
|
||||
<CommonPage :show-header="false">
|
||||
<n-button type="error" @click="handleDelete"> <icon-mi:delete mr-5 />删除</n-button>
|
||||
</CommonPage>
|
||||
</template>
|
||||
|
||||
<script setup name="TestDialog">
|
||||
const handleDelete = function () {
|
||||
$dialog.confirm({
|
||||
content: '确认删除？',
|
||||
confirm() {
|
||||
$message.success('删除成功')
|
||||
},
|
||||
cancel() {
|
||||
$message.warning('已取消')
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
89
src/views/demo/base/index.vue
Normal file
89
src/views/demo/base/index.vue
Normal file
@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<CommonPage show-footer>
|
||||
<n-space size="large">
|
||||
<n-card title="按钮 Button">
|
||||
<n-space>
|
||||
<n-button>Default</n-button>
|
||||
<n-button type="tertiary"> Tertiary </n-button>
|
||||
<n-button type="primary"> Primary </n-button>
|
||||
<n-button type="info"> Info </n-button>
|
||||
<n-button type="success"> Success </n-button>
|
||||
<n-button type="warning"> Warning </n-button>
|
||||
<n-button type="error"> Error </n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
|
||||
<n-card title="带 Icon 的按钮">
|
||||
<n-space>
|
||||
<n-button type="info"> <TheIcon icon="material-symbols:add" :size="18" class="mr-5" /> 新增 </n-button>
|
||||
<n-button type="error">
|
||||
<TheIcon icon="material-symbols:delete-outline" :size="18" class="mr-5" /> 删除
|
||||
</n-button>
|
||||
<n-button type="warning">
|
||||
<TheIcon icon="material-symbols:edit-outline" :size="18" class="mr-5" /> 编辑
|
||||
</n-button>
|
||||
<n-button type="primary"> <TheIcon icon="majesticons:eye-line" :size="18" class="mr-5" /> 查看 </n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</n-space>
|
||||
|
||||
<n-space size="large" mt-30>
|
||||
<n-card min-w-340 title="通知 Notification">
|
||||
<n-space>
|
||||
<n-button @click="notify('info')"> 信息 </n-button>
|
||||
<n-button @click="notify('success')"> 成功 </n-button>
|
||||
<n-button @click="notify('warning')"> 警告 </n-button>
|
||||
<n-button @click="notify('error')"> 错误 </n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
|
||||
<n-card min-w-340 title="确认弹窗 Dialog">
|
||||
<n-button type="error" @click="handleDelete"> <icon-mi:delete mr-5 />删除</n-button>
|
||||
</n-card>
|
||||
|
||||
<n-card min-w-340 title="消息提醒 Message">
|
||||
<n-button :loading="loading" type="primary" @click="handleLogin">
|
||||
<icon-mdi:login v-show="!loading" mr-5 />
|
||||
登陆
|
||||
</n-button>
|
||||
</n-card>
|
||||
</n-space>
|
||||
</CommonPage>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const handleDelete = function () {
|
||||
$dialog.confirm({
|
||||
content: '确认删除？',
|
||||
confirm() {
|
||||
$message.success('删除成功')
|
||||
},
|
||||
cancel() {
|
||||
$message.warning('已取消')
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
function handleLogin() {
|
||||
loading.value = true
|
||||
$message.loading('登陆中...')
|
||||
setTimeout(() => {
|
||||
$message.error('登陆失败')
|
||||
$message.loading('正在尝试重新登陆...')
|
||||
setTimeout(() => {
|
||||
$message.success('登陆成功')
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
function notify(type) {
|
||||
$notification[type]({
|
||||
content: '说点啥呢',
|
||||
meta: '想不出来',
|
||||
duration: 2500,
|
||||
keepAliveOnHover: true,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<CommonPage>
|
||||
<CommonPage show-footer>
|
||||
<div w-350>
|
||||
<n-input v-model:value="inputVal" />
|
||||
<n-input-number v-model:value="number" mt-30 />
|
||||
<p mt-20 text-center color-gray text-14>注：右击标签重新加载可重置keep-alive</p>
|
||||
</div>
|
||||
</CommonPage>
|
||||
</template>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<CommonPage title="我是自定义Title">
|
||||
<n-button type="primary" @click="handleLogin">
|
||||
<icon-mdi:login mr-5 />
|
||||
登陆
|
||||
</n-button>
|
||||
</CommonPage>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
function handleLogin() {
|
||||
$message.loading('登陆中...')
|
||||
setTimeout(() => {
|
||||
$message.error('登陆失败')
|
||||
$message.loading('正在尝试重新登陆...')
|
||||
setTimeout(() => {
|
||||
$message.success('登陆成功')
|
||||
}, 2000)
|
||||
}, 2000)
|
||||
}
|
||||
</script>
|
||||
@ -4,37 +4,28 @@ export default {
|
||||
name: 'Test',
|
||||
path: '/base',
|
||||
component: Layout,
|
||||
redirect: '/base/unocss',
|
||||
redirect: '/base/index',
|
||||
meta: {
|
||||
title: '基础功能',
|
||||
customIcon: 'logo',
|
||||
icon: 'majesticons:compass-line',
|
||||
order: 1,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
name: 'BaseComponents',
|
||||
path: 'idnex',
|
||||
component: () => import('./index.vue'),
|
||||
meta: {
|
||||
title: '基础组件',
|
||||
icon: 'material-symbols:auto-awesome-outline-rounded',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Unocss',
|
||||
path: 'unocss',
|
||||
component: () => import('./unocss/index.vue'),
|
||||
meta: {
|
||||
title: '测试unocss',
|
||||
icon: 'material-symbols:auto-awesome-outline-rounded',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Message',
|
||||
path: 'message',
|
||||
component: () => import('./message/index.vue'),
|
||||
meta: {
|
||||
title: '测试Message',
|
||||
icon: 'material-symbols:auto-awesome-outline-rounded',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Dialog',
|
||||
path: 'dialog',
|
||||
component: () => import('./dialog/index.vue'),
|
||||
meta: {
|
||||
title: '测试Dialog',
|
||||
title: 'Unocss',
|
||||
icon: 'material-symbols:auto-awesome-outline-rounded',
|
||||
},
|
||||
},
|
||||
|
||||
@ -61,6 +61,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 font-normal text-18 text-center w-350 mt-10 color-gray-400>Flex 骰子</h2>
|
||||
<h2 font-normal text-14 text-center w-350 mt-10 color-gray>Flex 骰子</h2>
|
||||
</CommonPage>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user