feat: 前端自动注册插件功能

This commit is contained in:
H0nGzA1
2023-03-31 00:25:23 +08:00
parent 96ad956efd
commit 255c405e59
3 changed files with 30 additions and 11 deletions

View File

@@ -25,6 +25,8 @@ import fontAwesome470 from 'e-icon-picker/icon/fontawesome/font-awesome.v4.7.0.j
import eIconList from 'e-icon-picker/icon/default-icon/eIconList.js'; import eIconList from 'e-icon-picker/icon/default-icon/eIconList.js';
import iconfont from '/@/assets/iconfont/iconfont.json'; //引入json文件 import iconfont from '/@/assets/iconfont/iconfont.json'; //引入json文件
import '/@/assets/iconfont/iconfont.css'; //引入css import '/@/assets/iconfont/iconfont.css'; //引入css
// 自动注册插件
import { scanAndInstallPlugins } from '/@/views/plugins/index';
let forIconfont = analyzingIconForIconfont(iconfont); //解析class let forIconfont = analyzingIconForIconfont(iconfont); //解析class
iconList.addIcon(forIconfont.list); // 添加iconfont dvadmin3的icon iconList.addIcon(forIconfont.list); // 添加iconfont dvadmin3的icon
@@ -33,6 +35,8 @@ iconList.addIcon(fontAwesome470); // 添加fontAwesome 470版本的图标
let app = createApp(App); let app = createApp(App);
scanAndInstallPlugins(app);
app.use(eIconPicker, { app.use(eIconPicker, {
addIconList: eIconList, //全局添加图标 addIconList: eIconList, //全局添加图标
removeIconList: [], //全局删除图标 removeIconList: [], //全局删除图标

View File

@@ -7,8 +7,8 @@ import { setLogger } from '@fast-crud/fast-crud';
import ui from '@fast-crud/ui-element'; import ui from '@fast-crud/ui-element';
import { request } from '/@/utils/service'; import { request } from '/@/utils/service';
//扩展包 //扩展包
import {FsExtendsEditor} from "@fast-crud/fast-extends"; import { FsExtendsEditor } from '@fast-crud/fast-extends';
import "@fast-crud/fast-extends/dist/style.css"; import '@fast-crud/fast-extends/dist/style.css';
export default { export default {
async install(app: any, options: any) { async install(app: any, options: any) {
// 先安装ui // 先安装ui
@@ -18,7 +18,7 @@ export default {
//i18n, //i18n配置可选默认使用中文具体用法请看demo里的 src/i18n/index.js 文件 //i18n, //i18n配置可选默认使用中文具体用法请看demo里的 src/i18n/index.js 文件
// 此处配置公共的dictRequest字典请求 // 此处配置公共的dictRequest字典请求
async dictRequest({ dict }: any) { async dictRequest({ dict }: any) {
return await request({ url: dict.url,params:dict.params || {} }); //根据dict的url异步返回一个字典数组 return await request({ url: dict.url, params: dict.params || {} }); //根据dict的url异步返回一个字典数组
}, },
//公共crud配置 //公共crud配置
commonOptions() { commonOptions() {
@@ -28,9 +28,9 @@ export default {
//你项目后台接口大概率与fast-crud所需要的返回结构不一致所以需要配置此项 //你项目后台接口大概率与fast-crud所需要的返回结构不一致所以需要配置此项
//请参考文档http://fast-crud.docmirror.cn/api/crud-options/request.html //请参考文档http://fast-crud.docmirror.cn/api/crud-options/request.html
transformQuery: ({ page, form, sort }: any) => { transformQuery: ({ page, form, sort }: any) => {
if (sort.asc !== undefined){ if (sort.asc !== undefined) {
form["ordering"] = `${sort.asc ? "" : "-"}${sort.prop}` form['ordering'] = `${sort.asc ? '' : '-'}${sort.prop}`;
} }
//转换为你pageRequest所需要的请求参数结构 //转换为你pageRequest所需要的请求参数结构
return { page: page.currentPage, limit: page.pageSize, ...form }; return { page: page.currentPage, limit: page.pageSize, ...form };
}, },
@@ -58,11 +58,11 @@ export default {
}, },
}); });
//富文本 //富文本
app.use(FsExtendsEditor,{ app.use(FsExtendsEditor, {
wangEditor:{ wangEditor: {
width:300, width: 300,
} },
}) });
setLogger({ level: 'error' }); setLogger({ level: 'error' });
// 设置自动染色 // 设置自动染色
const dictComponentList = ['dict-cascader', 'dict-checkbox', 'dict-radio', 'dict-select', 'dict-switch', 'dict-tree']; const dictComponentList = ['dict-cascader', 'dict-checkbox', 'dict-radio', 'dict-select', 'dict-switch', 'dict-tree'];

View File

@@ -0,0 +1,15 @@
import { defineAsyncComponent, AsyncComponentLoader } from 'vue';
// 扫描插件目录并注册插件
export const scanAndInstallPlugins = (app: any) => {
const components = import.meta.glob('./**/*.vue');
const pluginNames = new Set();
// 遍历对象并注册异步组件
for (const [key, value] of Object.entries(components)) {
const name = key.slice(key.lastIndexOf('/') + 1, key.lastIndexOf('.'));
app.component(name, defineAsyncComponent(value as AsyncComponentLoader));
const pluginsName = key.match(/\/([^\/]*)\//)?.[1];
pluginNames.add(pluginsName);
}
console.log('已发现插件:', Array.from(pluginNames));
};