全自动导入文件

Reviewed-on: #9

packages/Input/index.js

@@ -1,9 +0,0 @@
-import Input from './src'
-
-// 为组件提供 install 安装方法，供按需引入
-Input.install = function (Vue) {
-    Vue.component(Input.name, Input)
-}
-
-// 导出组件
-export default Input

packages/Input/src/index.vue

@@ -1,75 +0,0 @@
-<template>
-  <el-input
-    class="ag_input"
-    :style="{ width }"
-    :value="value"
-    :size="size"
-    v-on="inputListeners"
-    v-bind="[$attrs]"
-  >
-    <slot name="append" slot="append" />
-    <slot name="prefix" slot="prefix" />
-    <slot name="suffix" slot="suffix" />
-    <slot name="prepend" slot="prepend" />
-  </el-input>
-</template>
-  
-  <script>
-/**
- * WInput
- * @desc    处理输入的输入框(转大写，不能有中文空格等)
- */
-export default {
-  name: "AgInput",
-  props: {
-    width: {
-      type: String,
-      default: "",
-    },
-    size: {
-      type: String,
-      default: "small",
-    },
-    value: {
-      type: String,
-      default: "",
-    },
-    toUpperCase: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    // 所有父级事件
-    inputListeners() {
-      return Object.assign(
-        {},
-        // 我们从父级添加所有的监听器
-        this.$listeners,
-        // 然后我们添加自定义监听器，
-        // 或覆写一些监听器的行为
-        {
-          // 这里确保组件配合 `v-model` 的工作
-          input: (value) => {
-            this.$emit("input", this.toUpperCase ? value.toUpperCase() : value);
-          },
-          blur: (e) => {
-            let value = e.target.value
-              .trim()
-              .replace(/\s/g, (match) =>
-                match.charCodeAt(0) === 12288 ? String.fromCharCode(32) : match
-              );
-
-            // 失去焦点自动首位去空格
-            this.$emit("input", value);
-          },
-        }
-      );
-    },
-  },
-  mounted() {},
-};
-</script>
-  
-  <style lang="scss" scoped></style>
-  

packages/Select/index.js

@@ -1,9 +0,0 @@
-import Select from './src'
-
-// 为组件提供 install 安装方法，供按需引入
-Select.install = function (Vue) {
-    Vue.component(Select.name, Select)
-}
-
-// 导出组件
-export default Select

packages/agInput/index.js

@@ -0,0 +1,9 @@
+import agInput from './src'
+
+// 为组件提供 install 安装方法，供按需引入
+agInput.install = function (Vue) {
+    Vue.component(agInput.name, agInput)
+}
+
+// 导出组件
+export default agInput

packages/agInput/src/index.vue

@@ -20,7 +20,7 @@
  * @desc    处理输入的输入框(转大写，不能有中文空格等)
  */
 export default {
-  name: "AgInput",
+  name: "agInput",
   props: {
     width: {
       type: String,

packages/agSelect/index.js

@@ -0,0 +1,9 @@
+import agSelect from './src'
+
+// 为组件提供 install 安装方法，供按需引入
+agSelect.install = function (Vue) {
+    Vue.component(agSelect.name, agSelect)
+}
+
+// 导出组件
+export default agSelect

packages/agSelect/src/index.vue

@@ -20,7 +20,7 @@
 <script>
 import cloneDeep from "../../../src/utils/cloneDeep";
 export default {
-  name: "AgSelect",
+  name: "agSelect",
   props: {
     width: {
       type: String,
@@ -43,7 +43,6 @@ export default {
   },
   computed: {
     attrs() {
-      cloneDeep();
       if (this.$attrs["remote-method"]) {
         let obj = cloneDeep(this.$attrs);
         Reflect.deleteProperty(obj, "remote-method");

packages/index.js

@@ -1,30 +1,38 @@
-// 导入button组件
-import pedestal from './pedestal/src/index.vue'
+// 使用 require.context 自动扫描并获取 packages 目录下所有 index.js 文件的引用  
+const requireComponent = require.context('./', true, /index\.js$/);  
   
-// 组件列表
-const components = [
-  pedestal,
-]
+// 定义一个数组来存储组件配置  
+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 作为参数（使用 use 注册插件，那么所有的组件都会被注册）
+// 定义 install 方法，接收 Vue 作为参数  
 const install = function (Vue) {  
-  // 判断是否安装
-  if (install.installed) return
-  // 遍历注册全局组件
-  components.map(component => Vue.component(component.name, component))
-}
+  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(window.Vue);  
 }  
   
+// 导出 install 方法和所有组件  
 export default {  
-  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
-  install,
-}
-export {
-  install,
-  // 以下是具体的组件列表
-  pedestal,
-}
+  // 为了方便单独引入组件，可以直接导出 components 对象  
+  ...components  
+};  
+  
+// 注意：虽然这里导出了 components 对象，但通常不建议直接这样使用，  
+// 因为这样做会破坏组件的模块化封装。更常见的做法是  
+// 在需要时从该文件中单独导入特定的组件。

packages/pedestal/index.js

@@ -1,9 +0,0 @@
-import pedestal from './src'
-
-// 为组件提供 install 安装方法，供按需引入
-pedestal.install = function (Vue) {
-    Vue.component(pedestal.name, pedestal)
-}
-
-// 导出组件
-export default pedestal

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Pedestal
+    <agSelect
       ref="ref_Pedestal"
       v-model="value"
       @input="changeInput"
@@ -17,14 +17,14 @@
           >导出</el-button
         >
       </template> -->
-    </Pedestal>
+    </agSelect>
   </div>
 </template>
 
 <script>
-import Pedestal from "../packages/Select/src/index";
+import agSelect from "../packages/agSelect/src/index";
 export default {
-  components: { Pedestal },
+  components: { agSelect },
   data() {
     return {
       value: "",