packages/agSelect/src/index.vue

@@ -1,217 +1,102 @@
 <template>
-  <div
+  <el-select
-    @mousedown="
+    class="ag_select"
-      (e) => {
+    :style="{ width }"
-        e.preventDefault();
+    :value="value"
-        selectOpen = true;
+    :size="size"
-      }
+    v-on="inputListeners"
-    "
+    v-bind="attrs"
-    ref="main"
   >
-    <a-select
+    <el-option
-      class="t_select"
+      v-for="(item, index) in options"
-      v-model="childSelectedValue"
+      :key="index"
-      :style="{ width: width || '100%' }"
+      :label="item.label"
-      :placeholder="placeholder"
+      :value="item.value"
-      :open="selectOpen"
+    ></el-option>
-      @select="handleSelect"
+    <!-- <slot name="options" slot="options" /> -->
-      v-bind="attrs"
+  </el-select>
-      v-on="$listeners"
-      :mode="mode"
-    >
-      <template v-for="(index, name) in $slots" v-slot:[name]>
-        <slot :name="name" />
-      </template>
-      <template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
-        <slot :name="name" v-bind="data"></slot>
-      </template>
-      <div slot="dropdownRender" slot-scope="menu">
-        <a-checkbox
-          v-if="mode && !isShowPagination"
-          :checked="selectChecked"
-          @change="selectAll"
-          class="all_checkbox"
-          >全选</a-checkbox
-        >
-        <v-nodes :vnodes="menu" />
-        <div class="t_select__pagination" v-if="isShowPagination">
-          <a-pagination
-            :page-size.sync="paginationOption.pageSize"
-            v-model="paginationOption.current"
-            :total="paginationOption.total"
-            @change="currentChange"
-            v-bind="{
-              size: 'small',
-              'hide-on-single-page': true,
-              showQuickJumper: true,
-              ...$attrs,
-              ...paginationOption.bind,
-            }"
-            v-on="$listeners"
-          />
-        </div>
-      </div>
-      <a-select-option
-        v-for="(item, index) in optionSource"
-        :key="index"
-        :value="item[valueKey]"
-        >{{
-          customLabel ? customLabelHandler(item) : item[labelKey]
-        }}</a-select-option
-      >
-    </a-select>
-  </div>
 </template>
+
 <script>
+import cloneDeep from "../../../src/utils/cloneDeep";
 export default {
-  name: "TAntdSelect",
+  name: "agSelect",
-  components: {
-    VNodes: {
-      functional: true,
-      render: (h, ctx) => ctx.props.vnodes,
-    },
-  },
   props: {
-    value: {
-      type: [String, Number, Array, Boolean, Object],
-    },
-    // 多选 'multiple'
-    mode: {
-      type: String,
-    },
-    placeholder: {
-      type: String,
-      default: "请选择",
-    },
-    // 选择框宽度
     width: {
       type: String,
+      default: "",
     },
-    // 是否自定义设置下拉label
+    value: {
-    customLabel: {
       type: String,
+      default: "",
     },
-    // 传入的option数组中，要作为最终选择项的键值key
+    size: {
-    valueKey: {
       type: String,
-      default: "key",
+      default: "small",
-    },
-    // 传入的option数组中，要作为显示项的键值名称
-    labelKey: {
-      type: String,
-      default: "label",
-    },
-    // 下拉框组件数据源
-    optionSource: {
-      type: Array,
-    },
-    // 是否显示分页
-    isShowPagination: {
-      type: Boolean,
-      default: false,
-    },
-    // 分页配置项
-    paginationOption: {
-      type: Object,
-      default: () => {
-        return {
-          pageSize: 6, // 每页显示条数
-          current: 1, // 当前页
-          total: 0, // 总条数
-        };
-      },
     },
   },
   data() {
     return {
-      selectOpen: false,
+      model: "",
+      options: [],
     };
   },
   computed: {
-    childSelectedValue: {
-      get() {
-        return this.value || undefined;
-      },
-      set(val) {
-        this.$emit("input", val);
-      },
-    },
     attrs() {
-      return {
+      if (this.$attrs["remote-method"]) {
-        allowClear: true,
+        let obj = cloneDeep(this.$attrs);
-        showSearch: true,
+        Reflect.deleteProperty(obj, "remote-method");
-        ...this.$attrs,
+        return { ...obj, clearable: true, filterable: true, remote: true };
-      };
+      }
+      return false;
     },
-    selectChecked: {
+    // 所有父级事件
-      get() {
+    inputListeners() {
-        return this.childSelectedValue?.length === this.optionSource?.length;
+      return Object.assign(
-      },
+        {},
-      set(val) {
+        // 我们从父级添加所有的监听器
-        // console.log('set', val)
+        this.$listeners,
-        this.$emit("input", val);
+        // 然后我们添加自定义监听器，
-      },
+        // 或覆写一些监听器的行为
+        {
+          // 这里确保组件配合 `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() {
+  watch: {
-    document.addEventListener("click", this.bodyCloseMenus);
+    value: {
-  },
+      immediate: true,
-  beforeDestroy() {
+      handler(newVal) {
-    document.removeEventListener("click", this.bodyCloseMenus);
+        this.removeMethod(newVal);
+        this.model = newVal;
+      },
+    },
   },
   methods: {
-    // 点击空白区域
+    async removeMethod(keywords) {
-    bodyCloseMenus(e) {
+      if (this.$attrs["remote-method"]) {
-      if (this.$refs.main && !this.$refs.main.contains(e.target)) {
+        let opts = await this.$attrs["remote-method"](keywords);
-        if (this.selectOpen == true) {
+        this.options = opts;
-          this.selectOpen = false;
-        }
       }
     },
-    // 点击全选
+    handleChange(value) {
-    selectAll(val) {
+      this.$emit("input", value);
-      const options = JSON.parse(JSON.stringify(this.optionSource));
-      if (val.target.checked) {
-        this.childSelectedValue = options?.map((item) => {
-          return item[this.valueKey];
-        });
-        setTimeout(() => {
-          this.$emit("change", this.childSelectedValue);
-        }, 0);
-      } else {
-        this.childSelectedValue = null;
-      }
-      this.selectOpen = false;
-    },
-    handleSelect(value, option) {
-      if (value) {
-        this.selectOpen = false;
-      }
-      this.$emit("select", value, option);
-    },
-    // 切换分页
-    currentChange(val) {
-      // console.log('切换分页', val)
-      if (!this.mode) {
-        this.childSelectedValue = null;
-      }
-      setTimeout(() => {
-        this.selectOpen = true;
-      }, 0);
-      this.$emit("current-change", val);
-    },
-    // 自定义label显示
-    customLabelHandler() {
-      // eslint-disable-next-line no-eval
-      return eval(this.customLabel);
     },
   },
 };
 </script>
-<style >
-.all_checkbox {
-  margin-left: 12px;
-  margin-top: 5px;
-}
-</style>
 
+<style lang="scss" scoped></style>