mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-09-17 17:26:38 +08:00
feat(projects): 新增组件页面：按钮、卡片示例
This commit is contained in:
Soybean
parent
0b10b5056e
commit
bdc39aff1b
@ -6,5 +6,5 @@ export default [
|
|||||||
Components({
|
Components({
|
||||||
resolvers: [IconsResolver({ componentPrefix: 'icon' })]
|
resolvers: [IconsResolver({ componentPrefix: 'icon' })]
|
||||||
}),
|
}),
|
||||||
Icons()
|
Icons({ scale: 1, defaultClass: 'inline-block' })
|
||||||
];
|
];
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
@import './naive.scss';
|
||||||
|
|
||||||
@mixin scrollbar($size:8px, $color:#d9d9d9) {
|
@mixin scrollbar($size:8px, $color:#d9d9d9) {
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background-color: $color;
|
background-color: $color;
|
||||||
|
|||||||
6
src/styles/scss/naive.scss
Normal file
6
src/styles/scss/naive.scss
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
.n-icon-slot {
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
@ -1,6 +1,576 @@
|
|||||||
<template>
|
<template>
|
||||||
<div></div>
|
<div>
|
||||||
|
<n-card title="按钮" class="h-full shadow-sm rounded-16px">
|
||||||
|
<n-grid cols="s:1 m:2" responsive="screen" :x-gap="16" :y-gap="16">
|
||||||
|
<n-grid-item v-for="item in buttonExample" :key="item.id" class="h-180px">
|
||||||
|
<n-card :title="item.label" class="h-full">
|
||||||
|
<p v-if="item.desc" class="pb-16px">{{ item.desc }}</p>
|
||||||
|
<n-space>
|
||||||
|
<n-button
|
||||||
|
v-for="button in item.buttons"
|
||||||
|
:key="button.id"
|
||||||
|
v-bind="button.props"
|
||||||
|
:style="`--icon-margin: ${button.props.circle ? 0 : 6}px`"
|
||||||
|
>
|
||||||
|
<template v-if="button.icon" #icon>
|
||||||
|
<Icon :icon="button.icon" />
|
||||||
|
</template>
|
||||||
|
{{ button.label }}
|
||||||
|
</n-button>
|
||||||
|
</n-space>
|
||||||
|
</n-card>
|
||||||
|
</n-grid-item>
|
||||||
|
<n-grid-item class="h-180px">
|
||||||
|
<n-card title="加载中" class="h-full">
|
||||||
|
<p class="pb-16px">按钮有加载状态。</p>
|
||||||
|
<n-space>
|
||||||
|
<n-button :loading="loading" type="primary" @click="startLoading">开始加载</n-button>
|
||||||
|
<n-button @click="endLoading">取消加载</n-button>
|
||||||
|
</n-space>
|
||||||
|
</n-card>
|
||||||
|
</n-grid-item>
|
||||||
|
</n-grid>
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts"></script>
|
<script setup lang="ts">
|
||||||
|
import { NCard, NGrid, NGridItem, NSpace, NButton } from 'naive-ui';
|
||||||
|
import type { ButtonProps } from 'naive-ui';
|
||||||
|
import { Icon } from '@iconify/vue';
|
||||||
|
import { useLoading } from '@/hooks';
|
||||||
|
|
||||||
|
interface ButtonDetail {
|
||||||
|
id: number;
|
||||||
|
props: ButtonProps & { href?: string; target?: string };
|
||||||
|
label?: string;
|
||||||
|
icon?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ButtonExample {
|
||||||
|
id: number;
|
||||||
|
label: string;
|
||||||
|
buttons: ButtonDetail[];
|
||||||
|
desc?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { loading, startLoading, endLoading } = useLoading();
|
||||||
|
|
||||||
|
const buttonExample: ButtonExample[] = [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
label: '基础',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
props: {},
|
||||||
|
label: 'Default'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
props: { type: 'tertiary' },
|
||||||
|
label: 'Tertiary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
props: { type: 'primary' },
|
||||||
|
label: 'Primary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
props: { type: 'info' },
|
||||||
|
label: 'Info'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
props: { type: 'success' },
|
||||||
|
label: 'Success'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
props: { type: 'warning' },
|
||||||
|
label: 'Warning'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
props: { type: 'error' },
|
||||||
|
label: 'Error'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
desc: '按钮的 type 分别为 default、primary、info、success、warning 和 error。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
label: '次要按钮',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
props: { strong: true, secondary: true },
|
||||||
|
label: 'Default'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
props: { strong: true, secondary: true, type: 'tertiary' },
|
||||||
|
label: 'Tertiary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
props: { strong: true, secondary: true, type: 'primary' },
|
||||||
|
label: 'Primary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
props: { strong: true, secondary: true, type: 'info' },
|
||||||
|
label: 'Info'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
props: { strong: true, secondary: true, type: 'success' },
|
||||||
|
label: 'Success'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
props: { strong: true, secondary: true, type: 'warning' },
|
||||||
|
label: 'Warning'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
props: { strong: true, secondary: true, type: 'error' },
|
||||||
|
label: 'Error'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
props: { strong: true, secondary: true, round: true },
|
||||||
|
label: 'Default'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
props: { strong: true, secondary: true, round: true, type: 'tertiary' },
|
||||||
|
label: 'Tertiary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
props: { strong: true, secondary: true, round: true, type: 'primary' },
|
||||||
|
label: 'Primary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
props: { strong: true, secondary: true, round: true, type: 'info' },
|
||||||
|
label: 'Info'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
props: { strong: true, secondary: true, round: true, type: 'success' },
|
||||||
|
label: 'Success'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
props: { strong: true, secondary: true, round: true, type: 'warning' },
|
||||||
|
label: 'Warning'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
props: { strong: true, secondary: true, round: true, type: 'error' },
|
||||||
|
label: 'Error'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
label: '次次要按钮',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
props: { tertiary: true },
|
||||||
|
label: 'Default'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
props: { tertiary: true, type: 'primary' },
|
||||||
|
label: 'Primary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
props: { tertiary: true, type: 'info' },
|
||||||
|
label: 'Info'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
props: { tertiary: true, type: 'success' },
|
||||||
|
label: 'Success'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
props: { tertiary: true, type: 'warning' },
|
||||||
|
label: 'Warning'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
props: { tertiary: true, type: 'error' },
|
||||||
|
label: 'Error'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
props: { tertiary: true, round: true },
|
||||||
|
label: 'Default'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
props: { tertiary: true, round: true, type: 'primary' },
|
||||||
|
label: 'Primary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
props: { tertiary: true, round: true, type: 'info' },
|
||||||
|
label: 'Info'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
props: { tertiary: true, round: true, type: 'success' },
|
||||||
|
label: 'Success'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
props: { tertiary: true, round: true, type: 'warning' },
|
||||||
|
label: 'Warning'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
props: { tertiary: true, round: true, type: 'error' },
|
||||||
|
label: 'Error'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
label: '次次次要按钮',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
props: { quaternary: true },
|
||||||
|
label: 'Default'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
props: { quaternary: true, type: 'primary' },
|
||||||
|
label: 'Primary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
props: { quaternary: true, type: 'info' },
|
||||||
|
label: 'Info'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
props: { quaternary: true, type: 'success' },
|
||||||
|
label: 'Success'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
props: { quaternary: true, type: 'warning' },
|
||||||
|
label: 'Warning'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
props: { quaternary: true, type: 'error' },
|
||||||
|
label: 'Error'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
props: { quaternary: true, round: true },
|
||||||
|
label: 'Default'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
props: { quaternary: true, round: true, type: 'primary' },
|
||||||
|
label: 'Primary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
props: { quaternary: true, round: true, type: 'info' },
|
||||||
|
label: 'Info'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
props: { quaternary: true, round: true, type: 'success' },
|
||||||
|
label: 'Success'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
props: { quaternary: true, round: true, type: 'warning' },
|
||||||
|
label: 'Warning'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
props: { quaternary: true, round: true, type: 'error' },
|
||||||
|
label: 'Error'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
label: '虚线按钮',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
props: { dashed: true },
|
||||||
|
label: 'Default'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
props: { dashed: true, type: 'tertiary' },
|
||||||
|
label: 'Tertiary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
props: { dashed: true, type: 'primary' },
|
||||||
|
label: 'Primary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
props: { dashed: true, type: 'info' },
|
||||||
|
label: 'Info'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
props: { dashed: true, type: 'success' },
|
||||||
|
label: 'Success'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
props: { dashed: true, type: 'warning' },
|
||||||
|
label: 'Warning'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
props: { dashed: true, type: 'error' },
|
||||||
|
label: 'Error'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
label: '尺寸',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
props: { size: 'tiny', strong: true },
|
||||||
|
label: '小小'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
props: { size: 'small', strong: true },
|
||||||
|
label: '小'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
props: { size: 'medium', strong: true },
|
||||||
|
label: '不小'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
props: { size: 'large', strong: true },
|
||||||
|
label: '不不小'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
label: '文本按钮',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
props: { text: true },
|
||||||
|
label: '那车头依然吐着烟',
|
||||||
|
icon: 'mdi:train'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
label: '自定义标签按钮',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
props: {
|
||||||
|
text: true,
|
||||||
|
tag: 'a',
|
||||||
|
href: 'https://github.com/honghuangdc/soybean-admin',
|
||||||
|
target: '_blank',
|
||||||
|
type: 'primary'
|
||||||
|
},
|
||||||
|
label: 'soybean-admin'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
desc: '你可以把按钮渲染成不同的标签，比如 a标签 。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
label: '按钮禁用',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
props: {
|
||||||
|
disabled: true
|
||||||
|
},
|
||||||
|
label: '不许点'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
desc: '按钮可以被禁用'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
label: '图标按钮',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
props: {
|
||||||
|
secondary: true,
|
||||||
|
strong: true
|
||||||
|
},
|
||||||
|
label: '+100元',
|
||||||
|
icon: 'mdi:cash-100'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
props: {
|
||||||
|
iconPlacement: 'right',
|
||||||
|
secondary: true,
|
||||||
|
strong: true
|
||||||
|
},
|
||||||
|
label: '+100元',
|
||||||
|
icon: 'mdi:cash-100'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
desc: '在按钮上使用图标。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
label: '不同形状按钮',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
props: {
|
||||||
|
circle: true
|
||||||
|
},
|
||||||
|
icon: 'mdi:cash-100'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
props: {
|
||||||
|
round: true
|
||||||
|
},
|
||||||
|
label: '圆角'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
props: {},
|
||||||
|
label: '方'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
desc: '按钮拥有不同的形状。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
label: '透明背景按钮',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
props: { ghost: true },
|
||||||
|
label: 'Default'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
props: { ghost: true, type: 'tertiary' },
|
||||||
|
label: 'Tertiary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
props: { ghost: true, type: 'primary' },
|
||||||
|
label: 'Primary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
props: { ghost: true, type: 'info' },
|
||||||
|
label: 'Info'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
props: { ghost: true, type: 'success' },
|
||||||
|
label: 'Success'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
props: { ghost: true, type: 'warning' },
|
||||||
|
label: 'Warning'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
props: { ghost: true, type: 'error' },
|
||||||
|
label: 'Error'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
desc: 'Ghost 按钮有透明的背景。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
label: '自定义颜色',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
props: {
|
||||||
|
color: '#8a2be2'
|
||||||
|
},
|
||||||
|
label: '#8a2be2',
|
||||||
|
icon: 'ic:baseline-color-lens'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
props: {
|
||||||
|
color: '#ff69b4'
|
||||||
|
},
|
||||||
|
label: '#ff69b4',
|
||||||
|
icon: 'ic:baseline-color-lens'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
props: {
|
||||||
|
color: '#8a2be2',
|
||||||
|
ghost: true
|
||||||
|
},
|
||||||
|
label: '#8a2be2',
|
||||||
|
icon: 'ic:baseline-color-lens'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
props: {
|
||||||
|
color: '#ff69b4',
|
||||||
|
ghost: true
|
||||||
|
},
|
||||||
|
label: '#ff69b4',
|
||||||
|
icon: 'ic:baseline-color-lens'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
props: {
|
||||||
|
color: '#8a2be2',
|
||||||
|
text: true
|
||||||
|
},
|
||||||
|
label: '#8a2be2',
|
||||||
|
icon: 'ic:baseline-color-lens'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
props: {
|
||||||
|
color: '#ff69b4',
|
||||||
|
text: true
|
||||||
|
},
|
||||||
|
label: '#ff69b4',
|
||||||
|
icon: 'ic:baseline-color-lens'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
desc: '这两个颜色看起来像毒蘑菇。'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
</script>
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|||||||
@ -1,6 +1,43 @@
|
|||||||
<template>
|
<template>
|
||||||
<div></div>
|
<div>
|
||||||
|
<n-card title="卡片" class="h-full shadow-sm rounded-16px">
|
||||||
|
<n-space :vertical="true">
|
||||||
|
<n-card title="基本用法">
|
||||||
|
<p class="pb-16px">基础卡片</p>
|
||||||
|
<n-card title="卡片">卡片内容</n-card>
|
||||||
|
</n-card>
|
||||||
|
<n-card title="尺寸">
|
||||||
|
<p class="pb-16px">卡片有 small、medium、large、huge 尺寸。</p>
|
||||||
|
<n-space vertical>
|
||||||
|
<n-card title="小卡片" size="small">卡片内容</n-card>
|
||||||
|
<n-card title="中卡片" size="medium">卡片内容</n-card>
|
||||||
|
<n-card title="大卡片" size="large">卡片内容</n-card>
|
||||||
|
<n-card title="超大卡片" size="huge">卡片内容</n-card>
|
||||||
|
</n-space>
|
||||||
|
</n-card>
|
||||||
|
<n-card title="文本按钮">
|
||||||
|
<p class="pb-16px">
|
||||||
|
content 和 footer 可以被 hard 或 soft 分段，action 可以被分段。分段分割线会在区域的上方出现。
|
||||||
|
</p>
|
||||||
|
<n-card
|
||||||
|
title="卡片分段示例"
|
||||||
|
:segmented="{
|
||||||
|
content: true,
|
||||||
|
footer: 'soft'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<template #header-extra>#header-extra</template>
|
||||||
|
卡片内容
|
||||||
|
<template #footer>#footer</template>
|
||||||
|
<template #action>#action</template>
|
||||||
|
</n-card>
|
||||||
|
</n-card>
|
||||||
|
</n-space>
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts"></script>
|
<script setup lang="ts">
|
||||||
|
import { NCard, NSpace } from 'naive-ui';
|
||||||
|
</script>
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user