From 3a26b24ce2c801e53dacf8d844e7f450c1b860b4 Mon Sep 17 00:00:00 2001 From: qiaopengfei <2646186879@qq.com> Date: Tue, 2 Jul 2024 20:17:16 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E8=87=AA=E5=8A=A8=E5=AF=BC=E5=85=A5?= =?UTF-8?q?=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/agSelect/src/index.vue | 1 - packages/index.js | 70 ++++++++++++++++++--------------- src/App.vue | 8 ++-- 3 files changed, 42 insertions(+), 37 deletions(-) diff --git a/packages/agSelect/src/index.vue b/packages/agSelect/src/index.vue index 3677af9..61f2889 100644 --- a/packages/agSelect/src/index.vue +++ b/packages/agSelect/src/index.vue @@ -43,7 +43,6 @@ export default { }, computed: { attrs() { - cloneDeep(); if (this.$attrs["remote-method"]) { let obj = cloneDeep(this.$attrs); Reflect.deleteProperty(obj, "remote-method"); diff --git a/packages/index.js b/packages/index.js index eb1157d..3434cec 100644 --- a/packages/index.js +++ b/packages/index.js @@ -1,32 +1,38 @@ -// 导入button组件 -import agInput from './agInput/index' -import agSelect from './agSelect/index' - -// 组件列表 -const components = [ - agInput, - agSelect -] - -// 定义 install 方法,接收 Vue 作为参数(使用 use 注册插件,那么所有的组件都会被注册) -const install = function (Vue) { - // 判断是否安装 - if (install.installed) return - // 遍历注册全局组件 - components.map(component => Vue.component(component.name, component)) -} - -// 判断是否是直接引入文件 -if (typeof window !== 'undefined' && window.Vue) { - install(window.Vue) -} - -export default { - // 导出的对象必须具有 install,才能被 Vue.use() 方法安装 - install, -} -export { - // 以下是具体的组件列表 - agInput, - agSelect -} \ No newline at end of file +// 使用 require.context 自动扫描并获取 packages 目录下所有 index.js 文件的引用 +const requireComponent = require.context('./', true, /index\.js$/); + +// 定义一个数组来存储组件配置 +const components = requireComponent.keys().reduce((components, fileName) => { + // 排除可能的非 Vue 组件文件(这里假设所有 index.js 都是 Vue 组件) + if (fileName.endsWith('index.js')) { + const componentConfig = requireComponent(fileName).default; + if (componentConfig && componentConfig.name) { + components[componentConfig.name] = componentConfig; + } + } + return components; +}, {}); + +// 定义 install 方法,接收 Vue 作为参数 +const install = function (Vue) { + if (install.installed) return; + Object.keys(components).forEach(name => { + Vue.component(name, components[name]); + }); + install.installed = true; +}; + +// 如果是在浏览器环境且全局有 Vue,则自动安装 +if (typeof window !== 'undefined' && window.Vue) { + install(window.Vue); +} + +// 导出 install 方法和所有组件 +export default { + // 为了方便单独引入组件,可以直接导出 components 对象 + ...components +}; + +// 注意:虽然这里导出了 components 对象,但通常不建议直接这样使用, +// 因为这样做会破坏组件的模块化封装。更常见的做法是 +// 在需要时从该文件中单独导入特定的组件。 \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 976561a..759b7d0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,6 @@ --> - +