gyyg-components 0.4.8 → 0.4.9

package/package.json

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

package/src/components/MecInputDropdown/MecInputDropdown.js

@@ -0,0 +1,5 @@
+import MecInputDropdown from "./MecInputDropdown.vue";
+
+MecInputDropdown.install = Vue => Vue.component(MecInputDropdown.name, MecInputDropdown);
+
+export default MecInputDropdown;

package/src/components/MecInputDropdown/MecInputDropdown.vue

@@ -0,0 +1,280 @@
+<template>
+  <el-input
+    v-model="inputValue"
+    :placeholder="placeholder"
+    :type="inputTypeValue"
+    :disabled="disabled"
+    :readonly="readonly"
+    :size="size"
+    :maxlength="maxlength"
+    :show-word-limit="showWordLimit"
+    :clearable="clearable"
+    :prefix-icon="prefixIcon"
+    :suffix-icon="suffixIcon"
+    :rows="rows"
+    :autosize="autosize"
+    v-bind="$attrs"
+    v-feeInput="isFeeInput"
+    @input="handleInput"
+    @clear="clear"
+    @keyup.enter.native="handleEnter"
+    @blur="handleBlur"
+  >
+    <el-dropdown
+      slot="append"
+      trigger="click"
+      :disabled="disabled || optionList.length === 0"
+      @command="handleDropdownCommand"
+    >
+      <span
+        class="mec-input-dropdown__text"
+        :class="{ 'is-disabled': disabled }"
+      >
+        {{ selectedLabel }}
+        <i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item
+          v-for="item in optionList"
+          :key="getItemKey(item)"
+          :command="item[props.value]"
+          :disabled="item.disabled"
+        >
+          {{ item[props.label] }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-input>
+</template>
+
+<script>
+import feeInput from "@/directive/mec-feeInput/index";
+
+export default {
+  name: "MecInputDropdown",
+  directives: {
+    feeInput,
+  },
+  props: {
+    value: {
+      default: "",
+    },
+    dropdownValue: {
+      default: null,
+    },
+    options: {
+      required: true,
+    },
+    props: {
+      type: Object,
+      default() {
+        return {
+          label: "name",
+          value: "id",
+        };
+      },
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    dropdownPlaceholder: {
+      type: String,
+      default: "请选择",
+    },
+    inputType: {
+      type: String,
+      default: "text",
+    },
+    type: {
+      type: String,
+      default: "text",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: "medium",
+    },
+    maxlength: {
+      type: [Number, String],
+      default: -1,
+    },
+    showWordLimit: {
+      type: Boolean,
+      default: false,
+    },
+    clearable: {
+      type: Boolean,
+      default: false,
+    },
+    prefixIcon: {
+      type: String,
+      default: "",
+    },
+    suffixIcon: {
+      type: String,
+      default: "",
+    },
+    rows: {
+      default: 2,
+    },
+    autosize: {
+      type: [Boolean, Object],
+      default: () => {
+        return { minRows: 2 };
+      },
+    },
+    isFeeInput: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      inputValue: "",
+      selectedDropdown: null,
+      optionList: [],
+    };
+  },
+  computed: {
+    inputTypeValue() {
+      return this.inputType === "textarea" ? "textarea" : this.type;
+    },
+    optionMap() {
+      const map = new Map();
+      this.optionList.forEach((item) => {
+        map.set(item[this.props.value], item);
+      });
+      return map;
+    },
+    selectedInfo() {
+      return this.optionMap.get(this.selectedDropdown) || {};
+    },
+    selectedLabel() {
+      return this.selectedInfo[this.props.label] || this.dropdownPlaceholder;
+    },
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        this.inputValue = newValue;
+      },
+      immediate: true,
+    },
+    dropdownValue: {
+      handler(newValue) {
+        this.selectedDropdown = newValue;
+        this.selectFirstIfNeeded();
+      },
+      immediate: true,
+    },
+    options: {
+      handler(newOptions) {
+        this.processOptions(newOptions);
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    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 && result.data) || [];
+        this.selectFirstIfNeeded();
+      } catch (error) {
+        console.error("Failed to process options:", error);
+        this.optionList = [];
+      }
+    },
+    isEmptyValue(value) {
+      return value === undefined || value === null || value === "";
+    },
+    selectFirstIfNeeded() {
+      if (!this.optionList.length || !this.isEmptyValue(this.selectedDropdown)) {
+        return;
+      }
+
+      const firstOption = this.optionList[0];
+      this.setDropdownValue(firstOption[this.props.value]);
+    },
+    getItemKey(item) {
+      return item[this.props.value];
+    },
+    getOptionInfo(value) {
+      return this.optionMap.get(value) || {};
+    },
+    handleInput(val) {
+      let value = val;
+      if (this.inputType === "number") {
+        value = value.replace(/[^0-9]/g, "");
+      } else if (this.inputType === "chinese") {
+        value = value.replace(/[^\u4e00-\u9fa5]/g, "");
+      } else if (this.inputType === "english") {
+        value = value.replace(/[^a-zA-Z\s]/g, "");
+      } else if (this.inputType === "amount") {
+        value = value.replace(/[^0-9.]/g, "");
+        if (value.split(".").length > 2) {
+          value = value.replace(/\.+$/, "");
+        }
+      } else if (this.inputType === "englishAndNumber") {
+        value = value.replace(/[^a-zA-Z0-9\s]/g, "");
+      }
+
+      this.inputValue = value;
+      this.$emit("input", value);
+      this.$emit("update:value", value);
+    },
+    handleDropdownCommand(val) {
+      if (this.disabled) return;
+
+      this.setDropdownValue(val);
+    },
+    setDropdownValue(val) {
+      this.selectedDropdown = val;
+      console.log(val);
+      const info = this.getOptionInfo(val);
+
+      this.$emit("dropdown-change", val, info);
+      this.$emit("change", val, info);
+      this.$emit("update:dropdownValue", val);
+    },
+    clear() {
+      this.$emit("clear");
+    },
+    handleEnter() {
+      this.$emit("enter");
+    },
+    handleBlur() {
+      this.$emit("blur", this.inputValue);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.mec-input-dropdown__text {
+  cursor: pointer;
+  color: #606266;
+  white-space: nowrap;
+
+  &.is-disabled {
+    cursor: not-allowed;
+    color: #c0c4cc;
+  }
+}
+</style>