gyyg-components 0.4.2 → 0.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gyyg-components",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "private": false,
   "main": "lib/gyyg-components.umd.js",
   "scripts": {

package/src/components/MecSelect/MecSelect.vue

@@ -1,21 +1,20 @@
 <template>
   <el-select
     v-model="selected"
-    @clear="clear"
+    @clear="handleClear"
     @change="handleChange"
     :placeholder="placeholder"
-    :multiple="multiple || false"
+    :multiple="multiple"
     :clearable="clearable"
     :disabled="disabled"
     :size="size"
     v-bind="$attrs"
     :filterable="filterable"
-    :value="selected"
     style="width: 100%"
   >
     <el-option
-      v-for="item in option"
-      :key="item[props.value]"
+      v-for="item in optionList"
+      :key="getItemKey(item)"
       :label="item[props.label]"
       :value="item[props.value]"
       :disabled="item.disabled"
@@ -35,9 +34,11 @@ export default {
       required: true,
     },
     multiple: {
+      type: Boolean,
       default: false,
     },
     props: {
+      type: Object,
       default() {
         return {
           label: "name",
@@ -51,23 +52,41 @@ export default {
     },
     clearable: {
       type: Boolean,
+      default: true,
     },
     disabled: {
       type: Boolean,
-      defalut: false,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: undefined,
     },
-    size: String,
     filterable: {
       type: Boolean,
-      defalut: false,
+      default: false,
+    },
+    isSelectFirst: {
+      type: Boolean,
+      default: false,
     },
   },
   data() {
     return {
-      selected: "",
-      option: [],
+      selected: null,
+      optionList: [],
+      hasAutoSelected: false,
     };
   },
+  computed: {
+    optionMap() {
+      const map = new Map();
+      this.optionList.forEach((item) => {
+        map.set(item[this.props.value], item);
+      });
+      return map;
+    },
+  },
   watch: {
     value: {
       handler(val) {
@@ -76,45 +95,61 @@ export default {
       immediate: true,
     },
     options: {
-      handler: function () {
-        if (!Array.isArray(this.options) && this.options) {
-          if (this.options instanceof Promise) {
-            this.options.then((val) => {
-              this.option = val.data || val;
-              console.log(this.option);
-            });
-          }
-          if (typeof this.options == "function") {
-            this.options().then((val) => {
-              this.option = val.data || val;
-            });
-          }
-        } else {
-          this.option = this.options;
-        }
+      handler: function (newOptions) {
+        this.processOptions(newOptions);
       },
       deep: true,
       immediate: true,
     },
   },
   methods: {
-    handleChange(val) {
-      if (this.multiple) {
-        this.selected = val;
-        let info = this.option.filter((item) => val.includes(item[this.props.value]));
-        this.$emit("change", val, info);
-      } else {
-        this.selected = val;
-        let info = this.option.filter((item) => item[this.props.value] == val);
-        this.$emit("change", val, info.length > 0 ? info[0] : {});
+    async processOptions(options) {
+      try {
+        let result = options;
+        
+        if (options instanceof Promise) {
+          result = await options;
+        } else if (typeof options === "function") {
+          result = await options();
+        }
+        
+        this.optionList = Array.isArray(result) ? result : (result.data || []);
+        
+        if (this.isSelectFirst && !this.hasAutoSelected && !this.value && this.optionList.length > 0) {
+          this.hasAutoSelected = true;
+          this.handleChange(this.optionList[0][this.props.value]);
+        }
+      } catch (error) {
+        console.error("Failed to process options:", error);
+        this.optionList = [];
       }
-
-      this.$emit("input", this.selected);
+    },
+    
+    getItemKey(item) {
+      return item[this.props.value];
+    },
+    
+    getOptionInfo(value) {
+      if (this.multiple && Array.isArray(value)) {
+        return value.map((val) => this.optionMap.get(val)).filter(Boolean);
+      }
+      return this.optionMap.get(value) || {};
+    },
+    
+    handleChange(val) {
+      this.selected = val;
+      const info = this.getOptionInfo(val);
+      
+      this.$emit("change", val, info);
+      this.$emit("input", val);
       this.$emit("update:value", val);
     },
-    clear() {
-      this.selected = "";
+    
+    handleClear() {
+      this.selected = this.multiple ? [] : null;
       this.$emit("clear");
+      this.$emit("input", this.selected);
+      this.$emit("update:value", this.selected);
     },
   },
 };
@@ -122,4 +157,4 @@ export default {
 
 <style scoped>
 /* 你可以在这里添加自定义样式 */
-</style>
+</style>