mirror of
https://github.com/zclzone/vue-naive-admin.git
synced 2026-01-23 08:00:22 +08:00
init
This commit is contained in:
zclzone
115
src/views/base/index.vue
Normal file
115
src/views/base/index.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<!--------------------------------
|
||||
- @Author: Ronnie Zhang
|
||||
- @LastEditor: Ronnie Zhang
|
||||
- @LastEditTime: 2023/12/04 22:46:57
|
||||
- @Email: zclzone@outlook.com
|
||||
- Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
|
||||
--------------------------------->
|
||||
|
||||
<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">
|
||||
<i class="i-material-symbols:add mr-4 text-18" />
|
||||
新增
|
||||
</n-button>
|
||||
<n-button type="error">
|
||||
<i class="i-material-symbols:delete-outline mr-4 text-18" />
|
||||
删除
|
||||
</n-button>
|
||||
<n-button type="warning">
|
||||
<i class="i-material-symbols:edit-outline mr-4 text-18" />
|
||||
编辑
|
||||
</n-button>
|
||||
<n-button type="primary">
|
||||
<i class="i-majesticons:eye-line mr-4 text-18" />
|
||||
查看
|
||||
</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">
|
||||
<i class="i-mi:delete mr-4" />
|
||||
删除
|
||||
</n-button>
|
||||
</n-card>
|
||||
|
||||
<n-card min-w-340 title="消息提醒 Message">
|
||||
<n-space>
|
||||
<n-button :loading="loading" type="primary" @click="handleLogin">
|
||||
<i v-show="!loading" class="i-mdi:login mr-4" />
|
||||
登陆
|
||||
</n-button>
|
||||
<n-button type="error" @click="handleMultiMessage">多个错误提醒</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</n-space>
|
||||
</CommonPage>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { sleep } from '@/utils'
|
||||
const handleDelete = function () {
|
||||
$dialog.confirm({
|
||||
content: '确认删除？',
|
||||
confirm() {
|
||||
$message.success('删除成功')
|
||||
},
|
||||
cancel() {
|
||||
$message.warning('已取消')
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
async function handleLogin() {
|
||||
loading.value = true
|
||||
$message.loading('登陆中...', { key: 'login' })
|
||||
await sleep(2000)
|
||||
$message.error('登陆失败', { key: 'login' })
|
||||
await sleep(500)
|
||||
$message.loading('正在尝试重新登陆...', { key: 'login' })
|
||||
await sleep(2000)
|
||||
$message.success('登陆成功', { key: 'login' })
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
function handleMultiMessage() {
|
||||
$message.error(['用户名不能为空！', '密码不能为空！', '密码必须大于6位！'])
|
||||
}
|
||||
|
||||
function notify(type) {
|
||||
$notification[type]({
|
||||
content: '说点啥呢',
|
||||
meta: '想不出来',
|
||||
duration: 2500,
|
||||
keepAliveOnHover: true,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
24
src/views/base/keep-alive.vue
Normal file
24
src/views/base/keep-alive.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<!--------------------------------
|
||||
- @Author: Ronnie Zhang
|
||||
- @LastEditor: Ronnie Zhang
|
||||
- @LastEditTime: 2023/12/05 21:27:37
|
||||
- @Email: zclzone@outlook.com
|
||||
- Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
|
||||
--------------------------------->
|
||||
|
||||
<template>
|
||||
<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 text-14 color-gray>注：右击标签重新加载可重置keep-alive</p>
|
||||
</div>
|
||||
</CommonPage>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineOptions({ name: 'KeepAlive' })
|
||||
|
||||
const inputVal = ref('')
|
||||
const number = ref(0)
|
||||
</script>
|
||||
79
src/views/base/test-modal.vue
Normal file
79
src/views/base/test-modal.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<!--------------------------------
|
||||
- @Author: Ronnie Zhang
|
||||
- @LastEditor: Ronnie Zhang
|
||||
- @LastEditTime: 2023/12/05 21:27:43
|
||||
- @Email: zclzone@outlook.com
|
||||
- Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
|
||||
--------------------------------->
|
||||
|
||||
<template>
|
||||
<CommonPage show-footer>
|
||||
<n-button type="primary" @click="openModal1">打开第一个弹个窗</n-button>
|
||||
<MeModal ref="$modal1">
|
||||
<n-input v-model:value="text" />
|
||||
</MeModal>
|
||||
<MeModal ref="$modal2" title="上一个弹窗提交的内容">
|
||||
<h2>{{ text }}</h2>
|
||||
</MeModal>
|
||||
</CommonPage>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { MeModal } from '@/components'
|
||||
import { sleep } from '@/utils'
|
||||
import { useModal } from '@/composables'
|
||||
|
||||
const text = ref('')
|
||||
const [$modal1, okLoading1] = useModal()
|
||||
function openModal1() {
|
||||
$modal1.value?.open({
|
||||
title: '第一个弹窗',
|
||||
width: '600px',
|
||||
okText: '再弹个窗',
|
||||
cancelText: '关闭',
|
||||
async onOk() {
|
||||
okLoading1.value = true
|
||||
$message.loading('正在提交...', { key: 'modal1' })
|
||||
await sleep(1000)
|
||||
okLoading1.value = false
|
||||
$message.success('提交成功', { key: 'modal1' })
|
||||
openModal2()
|
||||
return false // 默认关闭弹窗，返回false可让弹窗不关闭
|
||||
},
|
||||
onCancel(message) {
|
||||
$message.info(message ?? '已取消')
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const [$modal2, okLoading2] = useModal()
|
||||
function openModal2() {
|
||||
// modal的options都是可变的
|
||||
if ($modal1.value) {
|
||||
$modal1.value.options.style.top = '-100px'
|
||||
$modal1.value.options.title = '我走了'
|
||||
}
|
||||
|
||||
$modal2.value?.open({
|
||||
cancelText: '关闭当前',
|
||||
okText: '关闭所有弹窗',
|
||||
style: { width: '320px', padding: '12px', top: '100px' },
|
||||
async onOk() {
|
||||
okLoading2.value = true
|
||||
$message.loading('正在关闭...', { key: 'modal2' })
|
||||
await sleep(1000)
|
||||
okLoading2.value = false
|
||||
|
||||
// 把modal1也关了
|
||||
$modal1.value?.close()
|
||||
$message.success('已关闭', { key: 'modal2' })
|
||||
},
|
||||
onCancel() {
|
||||
if ($modal1.value) {
|
||||
$modal1.value.options.style.top = '0'
|
||||
$modal1.value.options.title = '我又回来了'
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
49
src/views/base/unocss-icon.vue
Normal file
49
src/views/base/unocss-icon.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<!--------------------------------
|
||||
- @Author: Ronnie Zhang
|
||||
- @LastEditor: Ronnie Zhang
|
||||
- @LastEditTime: 2023/12/05 21:27:49
|
||||
- @Email: zclzone@outlook.com
|
||||
- Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
|
||||
--------------------------------->
|
||||
|
||||
<template>
|
||||
<CommonPage show-footer>
|
||||
<template #title-suffix>
|
||||
<n-tag class="ml-12" type="primary">feather图标集 + isme自定义图标</n-tag>
|
||||
</template>
|
||||
<ul class="flex flex-wrap justify-between">
|
||||
<li
|
||||
v-for="item in icons"
|
||||
:key="item"
|
||||
class="m-16 w-160 f-c-c flex-col cursor-pointer rounded-12 px-12 py-24 card-border auto-bg"
|
||||
@click="copy(`<i class="${item}" />`)"
|
||||
>
|
||||
<i :class="item + '?mask'" class="text-28 text-gray-600 hover:bg-primary" />
|
||||
<span
|
||||
class="mt-16 text-center text-14 text-gray-400 hover:color-primary"
|
||||
@click.stop="copy(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</span>
|
||||
</li>
|
||||
<li class="mx-16 h-0 w-160"></li>
|
||||
<li class="mx-16 h-0 w-160"></li>
|
||||
<li class="mx-16 h-0 w-160"></li>
|
||||
<li class="mx-16 h-0 w-160"></li>
|
||||
<li class="mx-16 h-0 w-160"></li>
|
||||
<li class="mx-16 h-0 w-160"></li>
|
||||
<li class="mx-16 h-0 w-160"></li>
|
||||
</ul>
|
||||
</CommonPage>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
import icons from 'isme:icons'
|
||||
|
||||
const { copy, copied } = useClipboard()
|
||||
|
||||
watch(copied, (val) => {
|
||||
val && $message.success('已复制到剪切板')
|
||||
})
|
||||
</script>
|
||||
76
src/views/base/unocss.vue
Normal file
76
src/views/base/unocss.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<!--------------------------------
|
||||
- @Author: Ronnie Zhang
|
||||
- @LastEditor: Ronnie Zhang
|
||||
- @LastEditTime: 2023/12/05 21:27:55
|
||||
- @Email: zclzone@outlook.com
|
||||
- Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
|
||||
--------------------------------->
|
||||
|
||||
<template>
|
||||
<CommonPage show-footer>
|
||||
<p>
|
||||
文档：
|
||||
<a c-blue hover-decoration-underline href="https://uno.antfu.me/" target="_blank">
|
||||
https://uno.antfu.me/
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
playground：
|
||||
<a c-blue hover-decoration-underline href="https://unocss.antfu.me/play/" target="_blank">
|
||||
https://unocss.antfu.me/play/
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<div mt-20 w-350 f-c-c flex-col>
|
||||
<div flex flex-wrap justify-around rounded-10 p-10 card-border>
|
||||
<div m-20 h-50 w-50 f-c-c rounded-5 p-10 border="1 solid">
|
||||
<span h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
</div>
|
||||
<div m-20 h-50 w-50 flex justify-between rounded-5 p-10 border="1 solid">
|
||||
<span h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
<span h-6 w-6 self-end rounded-3 bg-black dark:bg-white />
|
||||
</div>
|
||||
<div m-20 h-50 w-50 flex justify-between rounded-5 p-10 border="1 solid">
|
||||
<span h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
<span h-6 w-6 self-center rounded-3 bg-black dark:bg-white />
|
||||
<span h-6 w-6 self-end rounded-3 bg-black dark:bg-white />
|
||||
</div>
|
||||
<div m-20 h-50 w-50 flex justify-between rounded-5 p-10 border="1 solid">
|
||||
<div flex-col justify-between>
|
||||
<span h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
<span h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
</div>
|
||||
<div flex-col justify-between>
|
||||
<span h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
<span h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
</div>
|
||||
</div>
|
||||
<div m-20 h-50 w-50 flex-col items-center justify-between rounded-5 p-10 border="1 solid">
|
||||
<div w-full flex justify-between>
|
||||
<span h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
<span h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
</div>
|
||||
<div h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
<div w-full flex justify-between>
|
||||
<span h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
<span h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
</div>
|
||||
</div>
|
||||
<div m-20 h-50 w-50 flex-col justify-between rounded-5 p-10 border="1 solid">
|
||||
<div w-full flex justify-between>
|
||||
<span h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
<span h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
</div>
|
||||
<div w-full flex justify-between>
|
||||
<span h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
<span h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
</div>
|
||||
<div w-full flex justify-between>
|
||||
<span h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
<span h-6 w-6 rounded-3 bg-black dark:bg-white />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CommonPage>
|
||||
</template>
|
||||
Reference in New Issue
Block a user