组件

Reviewed-on: #10

packages/agInput/src/index.vue

@@ -2,10 +2,8 @@
   <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" />
@@ -26,20 +24,19 @@ export default {
       type: String,
       default: "",
     },
-    size: {
-      type: String,
-      default: "small",
-    },
-    value: {
-      type: String,
-      default: "",
-    },
     toUpperCase: {
       type: Boolean,
-      default: false,
+      default: true,
     },
   },
   computed: {
+    attrs() {
+      return {
+        size: "small",
+        clearable: true, // 默认清空
+        ...this.$attrs,
+      };
+    },
     // 所有父级事件
     inputListeners() {
       return Object.assign(

packages/index.js

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

src/App.vue

@@ -1,22 +1,6 @@
 <template>
   <div>
-    <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 ref="ref_Pedestal" :value="value" @input="changeInput">
     </agSelect>
   </div>
 </template>
@@ -28,32 +12,34 @@ export default {
   data() {
     return {
       value: "",
-      options: {
-        fnSearch: this.fnSearch,
-        formItemAttrs: {
-          order_sn: {
-            type: "input",
-            label: "订单号",
-            placeholder: "请输入订单号",
-          },
-          product_category_id: {
-            type: "select",
-            label: "商品分类",
-            multiple: false,
-            selectOpts: [{ label: "全部", value: "" }],
-            placeholder: "选择商品分类",
-          },
-        },
-      },
+      options: [{
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }, {
+          value: '选项3',
+          label: '蚵仔煎'
+        }, {
+          value: '选项4',
+          label: '龙须面'
+        }, {
+          value: '选项5',
+          label: '北京烤鸭'
+        }],
     };
   },
   methods: {
     changeInput() {
-      console.log(this.value);
+      // console.log(this.value);
     },
   },
 };
 </script>
 
-<style scoped lang='scss'>
+<style>
+body {
+  background: #918d8d;
+}
 </style>