mirror of
https://github.com/vbenjs/gf-vben-admin.git
synced 2025-01-23 11:50:20 +08:00
wip: VbenComponent5
This commit is contained in:
parent
99f16150d8
commit
e84e702c21
@ -52,7 +52,7 @@
|
|||||||
"intro.js": "^5.1.0",
|
"intro.js": "^5.1.0",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
"mockjs": "^1.1.0",
|
"mockjs": "^1.1.0",
|
||||||
"naive-ui": "^2.28.4",
|
"naive-ui": "^2.29.0",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
"path-to-regexp": "^6.2.1",
|
"path-to-regexp": "^6.2.1",
|
||||||
"pinia": "2.0.12",
|
"pinia": "2.0.12",
|
||||||
|
12
src/main.ts
12
src/main.ts
@ -18,6 +18,7 @@ import { registerGlobComp } from '/@/components/registerGlobComp';
|
|||||||
|
|
||||||
import { initVbenComponent, setMessage } from '/@/vbenComponents';
|
import { initVbenComponent, setMessage } from '/@/vbenComponents';
|
||||||
|
|
||||||
|
// 按需导入组件
|
||||||
import {
|
import {
|
||||||
NTag,
|
NTag,
|
||||||
NCard,
|
NCard,
|
||||||
@ -53,11 +54,17 @@ import {
|
|||||||
NRadioGroup,
|
NRadioGroup,
|
||||||
NText,
|
NText,
|
||||||
NConfigProvider,
|
NConfigProvider,
|
||||||
|
NDynamicTags,
|
||||||
|
NColorPicker,
|
||||||
|
NDescriptions,
|
||||||
|
NDescriptionsItem,
|
||||||
} from 'naive-ui';
|
} from 'naive-ui';
|
||||||
|
|
||||||
async function bootstrap() {
|
async function bootstrap() {
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
await setupI18n(app);
|
await setupI18n(app);
|
||||||
|
//VBenComponents 缩写为 VC
|
||||||
|
// 注册组件至VC,入参:app
|
||||||
initVbenComponent(app, {
|
initVbenComponent(app, {
|
||||||
Tag: NTag,
|
Tag: NTag,
|
||||||
Card: NCard,
|
Card: NCard,
|
||||||
@ -92,7 +99,12 @@ async function bootstrap() {
|
|||||||
RadioGroup: NRadioGroup,
|
RadioGroup: NRadioGroup,
|
||||||
Text: NText,
|
Text: NText,
|
||||||
Config: NConfigProvider,
|
Config: NConfigProvider,
|
||||||
|
DynamicTags: NDynamicTags,
|
||||||
|
ColorPicker: NColorPicker,
|
||||||
|
Descriptions: NDescriptions,
|
||||||
|
DescriptionsItem: NDescriptionsItem,
|
||||||
});
|
});
|
||||||
|
// 注册useMessage函数
|
||||||
setMessage(useMessage);
|
setMessage(useMessage);
|
||||||
// Configure store
|
// Configure store
|
||||||
setupStore(app);
|
setupStore(app);
|
||||||
|
4
src/vbenComponents/colorPicker/index.ts
Normal file
4
src/vbenComponents/colorPicker/index.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import { withInstall } from '/@/utils';
|
||||||
|
import ColorPicker from './src/ColorPicker.vue';
|
||||||
|
|
||||||
|
export const VbenColorPicker = withInstall(ColorPicker);
|
13
src/vbenComponents/colorPicker/src/ColorPicker.vue
Normal file
13
src/vbenComponents/colorPicker/src/ColorPicker.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<script lang="ts" setup name="VbenColorPicker">
|
||||||
|
import { maps } from '/@/vbenComponents';
|
||||||
|
const ColorPicker = maps.get('ColorPicker');
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<ColorPicker v-bind="$attrs">
|
||||||
|
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
|
||||||
|
<slot :name="item" v-bind="data || {}"></slot>
|
||||||
|
</template>
|
||||||
|
</ColorPicker>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
@ -1,7 +1,7 @@
|
|||||||
<script lang="ts" setup name="VbenConfig">
|
<script lang="ts" setup name="VbenConfig">
|
||||||
import { maps } from '/@/vbenComponents';
|
import { maps } from '/@/vbenComponents';
|
||||||
import { theme, ThemeEnum } from './data';
|
import { theme, ThemeEnum } from './data';
|
||||||
import { darkTheme, dateZhCN } from 'naive-ui';
|
import { darkTheme, dateZhCN, zhCN } from 'naive-ui';
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
|
||||||
const Config = maps.get('Config');
|
const Config = maps.get('Config');
|
||||||
@ -10,7 +10,7 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<Config v-bind="$attrs" :theme="themeValue" :date-locale="dateZhCN" abstract>
|
<Config v-bind="$attrs" :theme="themeValue" :date-locale="dateZhCN" :locale="zhCN" abstract>
|
||||||
<slot></slot
|
<slot></slot
|
||||||
></Config>
|
></Config>
|
||||||
</template>
|
</template>
|
||||||
|
9
src/vbenComponents/descriptions/index.ts
Normal file
9
src/vbenComponents/descriptions/index.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { withInstall } from '/@/utils';
|
||||||
|
import Descriptions from './src/Descriptions.vue';
|
||||||
|
import DescriptionsItem from './src/DescriptionsItem.vue';
|
||||||
|
import { DESCRIPTION_ITEM_FLAG } from 'naive-ui/es/descriptions/src/utils';
|
||||||
|
// @ts-ignore
|
||||||
|
DescriptionsItem[DESCRIPTION_ITEM_FLAG] = true;
|
||||||
|
|
||||||
|
export const VbenDesc = withInstall(Descriptions);
|
||||||
|
export const VbenDescItem = withInstall(DescriptionsItem);
|
12
src/vbenComponents/descriptions/src/Descriptions.vue
Normal file
12
src/vbenComponents/descriptions/src/Descriptions.vue
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<script lang="ts" setup name="VbenDesc">
|
||||||
|
import { maps } from '/@/vbenComponents';
|
||||||
|
const Descriptions = maps.get('Descriptions');
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Descriptions v-bind="$attrs">
|
||||||
|
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
|
||||||
|
<slot :name="item" v-bind="data || {}"></slot> </template
|
||||||
|
></Descriptions>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
13
src/vbenComponents/descriptions/src/DescriptionsItem.vue
Normal file
13
src/vbenComponents/descriptions/src/DescriptionsItem.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<script lang="ts" setup name="VbenDescItem">
|
||||||
|
import { maps } from '/@/vbenComponents';
|
||||||
|
const DescriptionsItem = maps.get('DescriptionsItem');
|
||||||
|
console.log(DescriptionsItem, 111);
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<DescriptionsItem v-bind="$attrs">
|
||||||
|
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
|
||||||
|
<slot :name="item" v-bind="data || {}"></slot> </template
|
||||||
|
></DescriptionsItem>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
@ -1,6 +1,6 @@
|
|||||||
import type { Component, App } from 'vue';
|
import type { Component, App } from 'vue';
|
||||||
import VXETable from 'vxe-table';
|
import VXETable from 'vxe-table';
|
||||||
//组件map
|
//VC组件map
|
||||||
export const maps = new Map<String, Component>();
|
export const maps = new Map<String, Component>();
|
||||||
export let useMsg = () => {};
|
export let useMsg = () => {};
|
||||||
export const setMessage = (func: Fn = () => {}) => {
|
export const setMessage = (func: Fn = () => {}) => {
|
||||||
@ -9,7 +9,7 @@ export const setMessage = (func: Fn = () => {}) => {
|
|||||||
// 引入组件
|
// 引入组件
|
||||||
import { VbenPopover } from './popover';
|
import { VbenPopover } from './popover';
|
||||||
import { VbenDivider } from './divider';
|
import { VbenDivider } from './divider';
|
||||||
import { VbenTag } from './tag';
|
import { VbenTag, VbenDynamicTags } from './tag';
|
||||||
import { VbenTable } from './table';
|
import { VbenTable } from './table';
|
||||||
import { VbenCard } from './card';
|
import { VbenCard } from './card';
|
||||||
import { VbenSpace } from './space';
|
import { VbenSpace } from './space';
|
||||||
@ -34,6 +34,8 @@ import { VbenPagination } from './pagination';
|
|||||||
import { VbenRadio, VbenRadioButton, VbenRadioGroup } from './radio';
|
import { VbenRadio, VbenRadioButton, VbenRadioGroup } from './radio';
|
||||||
import { VbenText } from './typography';
|
import { VbenText } from './typography';
|
||||||
import { VbenConfig } from './config';
|
import { VbenConfig } from './config';
|
||||||
|
import { VbenColorPicker } from './colorPicker';
|
||||||
|
import { VbenDesc, VbenDescItem } from './descriptions';
|
||||||
|
|
||||||
// 初始化组件
|
// 初始化组件
|
||||||
// global 是否全局注册
|
// global 是否全局注册
|
||||||
@ -76,5 +78,9 @@ export function initVbenComponent(app: App, comp: Object, global: boolean = true
|
|||||||
.use(VbenRadioGroup)
|
.use(VbenRadioGroup)
|
||||||
.use(VbenRadioButton)
|
.use(VbenRadioButton)
|
||||||
.use(VbenText)
|
.use(VbenText)
|
||||||
.use(VbenConfig);
|
.use(VbenConfig)
|
||||||
|
.use(VbenDynamicTags)
|
||||||
|
.use(VbenColorPicker)
|
||||||
|
.use(VbenDesc)
|
||||||
|
.use(VbenDescItem);
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,6 @@
|
|||||||
import { withInstall } from '/@/utils';
|
import { withInstall } from '/@/utils';
|
||||||
import Tag from './src/Tag.vue';
|
import Tag from './src/Tag.vue';
|
||||||
|
import DynamicTags from './src/DynamicTags.vue';
|
||||||
|
|
||||||
export const VbenTag = withInstall(Tag);
|
export const VbenTag = withInstall(Tag);
|
||||||
|
export const VbenDynamicTags = withInstall(DynamicTags);
|
||||||
|
12
src/vbenComponents/tag/src/DynamicTags.vue
Normal file
12
src/vbenComponents/tag/src/DynamicTags.vue
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<script lang="ts" setup name="VbenDynamicTags">
|
||||||
|
import { maps } from '/@/vbenComponents';
|
||||||
|
const DynamicTags = maps.get('DynamicTags');
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<DynamicTags v-bind="$attrs">
|
||||||
|
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
|
||||||
|
<slot :name="item" v-bind="data || {}"></slot></template
|
||||||
|
></DynamicTags>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
Loading…
Reference in New Issue
Block a user