wip: VbenComponent5

This commit is contained in:
JinMao 2022-05-29 05:12:23 +08:00
parent 99f16150d8
commit e84e702c21
11 changed files with 89 additions and 6 deletions

View File

@ -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",

View File

@ -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);

View File

@ -0,0 +1,4 @@
import { withInstall } from '/@/utils';
import ColorPicker from './src/ColorPicker.vue';
export const VbenColorPicker = withInstall(ColorPicker);

View 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>

View File

@ -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>

View 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);

View 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>

View 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>

View File

@ -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);
} }

View File

@ -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);

View 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>