packages/agInput/src/index.vue

@@ -2,8 +2,10 @@
   <el-input
     class="ag_input"
     :style="{ width }"
+    :value="value"
+    :size="size"
     v-on="inputListeners"
-    v-bind="attrs"
+    v-bind="[$attrs]"
   >
     <slot name="append" slot="append" />
     <slot name="prefix" slot="prefix" />
@@ -24,19 +26,20 @@ export default {
       type: String,
       default: "",
     },
+    size: {
+      type: String,
+      default: "small",
+    },
+    value: {
+      type: String,
+      default: "",
+    },
     toUpperCase: {
       type: Boolean,
-      default: true,
+      default: false,
     },
   },
   computed: {
-    attrs() {
-      return {
-        size: "small",
-        clearable: true, // 默认清空
-        ...this.$attrs,
-      };
-    },
     // 所有父级事件
     inputListeners() {
       return Object.assign(

packages/index.js

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

src/App.vue

@@ -1,6 +1,22 @@
 <template>
   <div>
-    <agSelect ref="ref_Pedestal" :value="value" @input="changeInput">
+    <agSelect
+      ref="ref_Pedestal"
+      v-model="value"
+      @input="changeInput"
+      :width="'180px'"
+    >
+      <!-- <template #operate="">
+        <el-button
+          class="excel"
+          type="success"
+          icon="el-icon-download"
+          size="small"
+          plain
+          @click="excel()"
+          >导出</el-button
+        >
+      </template> -->
     </agSelect>
   </div>
 </template>
@@ -12,34 +28,32 @@ export default {
   data() {
     return {
       value: "",
-      options: [{
+      options: {
-          value: '选项1',
+        fnSearch: this.fnSearch,
-          label: '黄金糕'
+        formItemAttrs: {
-        }, {
+          order_sn: {
-          value: '选项2',
+            type: "input",
-          label: '双皮奶'
+            label: "订单号",
-        }, {
+            placeholder: "请输入订单号",
-          value: '选项3',
+          },
-          label: '蚵仔煎'
+          product_category_id: {
-        }, {
+            type: "select",
-          value: '选项4',
+            label: "商品分类",
-          label: '龙须面'
+            multiple: false,
-        }, {
+            selectOpts: [{ label: "全部", value: "" }],
-          value: '选项5',
+            placeholder: "选择商品分类",
-          label: '北京烤鸭'
+          },
-        }],
+        },
+      },
     };
   },
   methods: {
     changeInput() {
-      // console.log(this.value);
+      console.log(this.value);
     },
   },
 };
 </script>
 
-<style>
+<style scoped lang='scss'>
-body {
-  background: #918d8d;
-}
 </style>