@weitutech/by-components 1.0.27 → 1.0.30

package/src/components/fold-search/index.vue

@@ -1,29 +1,29 @@
-<template>
-  <div class="drawer_query_btn b-fold-search">
-    <div @click="drawer">
-      <template v-if="show == true">
-        <span style="color: #3aa1ff; vertical-align:middle;">收起</span>&nbsp;&nbsp;<img style="vertical-align:middle;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjIwMHB4IiBoZWlnaHQ9IjIwMC4wMHB4IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzVjYWRmZiIgZD0iTTg3Ny41IDU2NS45bC0zNjcuNi0zNDAtMzY3LjYgMzQwYy0yMi41IDE0LjUtNTIuNSAxNC41LTY3LjUgMC0xNS0yMS43LTE1LTUwLjcgMC02NS4xTDQ5NSAxMTcuNWMwLTcuMiA3LjUtNy4yIDE1LTcuMnM3LjUgMCAxNSA3LjJsNDIwLjIgMzgzLjNjMjIuNSAyMS43IDE1IDUwLjYgMCA2NS4xLTIyLjcgMTQuNS01Mi43IDE0LjUtNjcuNyAwek00OTQuOCA0NTAuMWMwLTcuMiA3LjUtNy4yIDE1LTcuMnMxNSAwIDE1IDcuMkw5NDUgODMzLjRjMjIuNSAyMS43IDE1IDUwLjYgMCA2NS4xLTIyLjUgMTQuNC01Mi41IDE0LjQtNjcuNSAwTDUwOS44IDU1OC42IDE0Mi4yIDkwNS44Yy0yMi41IDE0LjUtNTIuNSAxNC41LTY3LjUgMC0xNS0yMS43LTE1LTUwLjcgMC02NS4xbDQyMC4xLTM5MC42eiBtMCAwIiAvPjwvc3ZnPg==" alt="收起">
-      </template>
-      <template v-else>
-        <span style="color: #3aa1ff; vertical-align:middle;">展开更多</span>&nbsp;&nbsp;<img style="vertical-align:middle;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjIwMHB4IiBoZWlnaHQ9IjIwMC4wMHB4IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzVjYWRmZiIgZD0iTTE0NS40IDQ2MS4xbDM2Ny42IDM0MCAzNjcuNi0zNDBjMjIuNS0xNC41IDUyLjUtMTQuNSA2Ny41IDAgMTUgMjEuNyAxNSA1MC43IDAgNjUuMUw1MjcuOSA5MDkuNWMwIDcuMi03LjUgNy4yLTE1IDcuMnMtNy41IDAtMTUtNy4yTDc3LjcgNTI2LjJjLTIyLjUtMjEuNy0xNS01MC42IDAtNjUuMSAyMi42LTE0LjUgNTIuNi0xNC41IDY3LjcgMHpNNTI4IDU3Ni45YzAgNy4yLTcuNSA3LjItMTUgNy4ycy0xNSAwLTE1LTcuMkw3Ny44IDE5My42Yy0yMi41LTIxLjctMTUtNTAuNiAwLTY1LjEgMjIuNS0xNC40IDUyLjUtMTQuNCA2Ny41IDBMNTEzIDQ2OC40bDM2Ny42LTM0Ny4yYzIyLjUtMTQuNSA1Mi41LTE0LjUgNjcuNSAwIDE1IDIxLjcgMTUgNTAuNyAwIDY1LjFMNTI4IDU3Ni45eiBtMCAwIiAvPjwvc3ZnPg==" alt="展开更多">
-      </template>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      show: false
-    }
-  },
-  methods: {
-    drawer(value) {
-      this.show = !this.show
-      this.$emit("change", this.show)
-    }
-
-  }
-}
-</script>
-
+<template>
+  <div class="drawer_query_btn b-fold-search">
+    <div @click="drawer">
+      <template v-if="show == true">
+        <span style="color: #3aa1ff; vertical-align:middle;">收起</span>&nbsp;&nbsp;<img style="vertical-align:middle;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjIwMHB4IiBoZWlnaHQ9IjIwMC4wMHB4IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzVjYWRmZiIgZD0iTTg3Ny41IDU2NS45bC0zNjcuNi0zNDAtMzY3LjYgMzQwYy0yMi41IDE0LjUtNTIuNSAxNC41LTY3LjUgMC0xNS0yMS43LTE1LTUwLjcgMC02NS4xTDQ5NSAxMTcuNWMwLTcuMiA3LjUtNy4yIDE1LTcuMnM3LjUgMCAxNSA3LjJsNDIwLjIgMzgzLjNjMjIuNSAyMS43IDE1IDUwLjYgMCA2NS4xLTIyLjcgMTQuNS01Mi43IDE0LjUtNjcuNyAwek00OTQuOCA0NTAuMWMwLTcuMiA3LjUtNy4yIDE1LTcuMnMxNSAwIDE1IDcuMkw5NDUgODMzLjRjMjIuNSAyMS43IDE1IDUwLjYgMCA2NS4xLTIyLjUgMTQuNC01Mi41IDE0LjQtNjcuNSAwTDUwOS44IDU1OC42IDE0Mi4yIDkwNS44Yy0yMi41IDE0LjUtNTIuNSAxNC41LTY3LjUgMC0xNS0yMS43LTE1LTUwLjcgMC02NS4xbDQyMC4xLTM5MC42eiBtMCAwIiAvPjwvc3ZnPg==" alt="收起">
+      </template>
+      <template v-else>
+        <span style="color: #3aa1ff; vertical-align:middle;">展开更多</span>&nbsp;&nbsp;<img style="vertical-align:middle;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjIwMHB4IiBoZWlnaHQ9IjIwMC4wMHB4IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzVjYWRmZiIgZD0iTTE0NS40IDQ2MS4xbDM2Ny42IDM0MCAzNjcuNi0zNDBjMjIuNS0xNC41IDUyLjUtMTQuNSA2Ny41IDAgMTUgMjEuNyAxNSA1MC43IDAgNjUuMUw1MjcuOSA5MDkuNWMwIDcuMi03LjUgNy4yLTE1IDcuMnMtNy41IDAtMTUtNy4yTDc3LjcgNTI2LjJjLTIyLjUtMjEuNy0xNS01MC42IDAtNjUuMSAyMi42LTE0LjUgNTIuNi0xNC41IDY3LjcgMHpNNTI4IDU3Ni45YzAgNy4yLTcuNSA3LjItMTUgNy4ycy0xNSAwLTE1LTcuMkw3Ny44IDE5My42Yy0yMi41LTIxLjctMTUtNTAuNiAwLTY1LjEgMjIuNS0xNC40IDUyLjUtMTQuNCA2Ny41IDBMNTEzIDQ2OC40bDM2Ny42LTM0Ny4yYzIyLjUtMTQuNSA1Mi41LTE0LjUgNjcuNSAwIDE1IDIxLjcgMTUgNTAuNyAwIDY1LjFMNTI4IDU3Ni45eiBtMCAwIiAvPjwvc3ZnPg==" alt="展开更多">
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      show: false
+    }
+  },
+  methods: {
+    drawer(value) {
+      this.show = !this.show
+      this.$emit("change", this.show)
+    }
+
+  }
+}
+</script>
+

package/src/components/form/comps/custom-date-picker.vue

@@ -1,109 +1,109 @@
-<template>
-  <div class="b-picker wrapper">
-    <el-date-picker
-      style="width: 70%"
-      :value="value"
-      v-bind="dateOptions"
-      @input="handleChange"
-    />
-    <div class="btn">
-      <span
-        v-for="item in shortcuts"
-        :key="item.key"
-        class="item"
-        :class="{ item_active: item.key === active }"
-        @click="handleClick(item)"
-      >
-        {{ item.label }}
-      </span>
-    </div>
-  </div>
-</template>
-
-<script>
-import moment from "moment"
-export default {
-  props: {
-    value: {
-      type: [Array, String],
-      required: true,
-      default: () => []
-    },
-    otherOption: {
-      type: Object,
-      default: () => ({
-        startPlaceholder: "开始时间",
-        endPlaceholder: "结束时间",
-        type: "daterange",
-        rangeSeparator: "-",
-        size: "mini",
-        active: ""
-      })
-    }
-  },
-
-  data() {
-    return {
-      shortcuts: [
-        { label: "上月", start_time: moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"), end_time: moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"), key: "last_month" },
-        { label: "昨天", start_time: moment().subtract(1, "days").format("YYYY-MM-DD"), end_time: moment().subtract(1, "days").format("YYYY-MM-DD"), key: "yesterday" },
-        { label: "今天", start_time: moment().startOf("day").format("YYYY-MM-DD"), end_time: moment().startOf("day").format("YYYY-MM-DD"), key: "today" },
-        { label: "本周", start_time: moment().startOf("week").format("YYYY-MM-DD"), end_time: moment().endOf("week").format("YYYY-MM-DD"), key: "week" },
-        { label: "本月", start_time: moment().startOf("month").format("YYYY-MM-DD"), end_time: moment().endOf("month").format("YYYY-MM-DD"), key: "month" }
-      ],
-      active: ""
-    }
-  },
-
-  computed: {
-    dateOptions() {
-      return {
-        startPlaceholder: "开始时间",
-        endPlaceholder: "结束时间",
-        type: "daterange",
-        rangeSeparator: "至",
-        size: "mini",
-        active: "",
-        ...this.otherOption
-      }
-    }
-  },
-
-  watch: {
-    value: {
-      handler(newValue, oldValue) {
-        if (newValue && newValue.length) {
-          this.active = ""
-          this.shortcuts.forEach(item => {
-            if (item.start_time === newValue[0] && item.end_time === newValue[1]) {
-              this.active = item.key
-            }
-          })
-        } else {
-          this.active = this.dateOptions.active
-          const item = this.shortcuts.find(item => item.key === this.dateOptions.active) || {}
-          if (item.start_time && item.end_time) {
-            this.handleClick(item)
-          }
-        }
-      },
-      immediate: true
-    }
-  },
-  
-  methods: {
-    handleChange(e) {
-      if (!e) {
-        this.$emit("input", [])
-      } else {
-        this.$emit("input", e.map(item => moment(item).format("YYYY-MM-DD")))
-      }
-      this.active = ""
-    },
-    handleClick(item) {
-      this.active = item.key
-      this.$emit("input", [item.start_time, item.end_time])
-    }
-  }
-}
-</script>
+<template>
+  <div class="b-picker wrapper">
+    <el-date-picker
+      style="width: 70%"
+      :value="value"
+      v-bind="dateOptions"
+      @input="handleChange"
+    />
+    <div class="btn">
+      <span
+        v-for="item in shortcuts"
+        :key="item.key"
+        class="item"
+        :class="{ item_active: item.key === active }"
+        @click="handleClick(item)"
+      >
+        {{ item.label }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from "moment"
+export default {
+  props: {
+    value: {
+      type: [Array, String],
+      required: true,
+      default: () => []
+    },
+    otherOption: {
+      type: Object,
+      default: () => ({
+        startPlaceholder: "开始时间",
+        endPlaceholder: "结束时间",
+        type: "daterange",
+        rangeSeparator: "-",
+        size: "mini",
+        active: ""
+      })
+    }
+  },
+
+  data() {
+    return {
+      shortcuts: [
+        { label: "上月", start_time: moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"), end_time: moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"), key: "last_month" },
+        { label: "昨天", start_time: moment().subtract(1, "days").format("YYYY-MM-DD"), end_time: moment().subtract(1, "days").format("YYYY-MM-DD"), key: "yesterday" },
+        { label: "今天", start_time: moment().startOf("day").format("YYYY-MM-DD"), end_time: moment().startOf("day").format("YYYY-MM-DD"), key: "today" },
+        { label: "本周", start_time: moment().startOf("week").format("YYYY-MM-DD"), end_time: moment().endOf("week").format("YYYY-MM-DD"), key: "week" },
+        { label: "本月", start_time: moment().startOf("month").format("YYYY-MM-DD"), end_time: moment().endOf("month").format("YYYY-MM-DD"), key: "month" }
+      ],
+      active: ""
+    }
+  },
+
+  computed: {
+    dateOptions() {
+      return {
+        startPlaceholder: "开始时间",
+        endPlaceholder: "结束时间",
+        type: "daterange",
+        rangeSeparator: "至",
+        size: "mini",
+        active: "",
+        ...this.otherOption
+      }
+    }
+  },
+
+  watch: {
+    value: {
+      handler(newValue, oldValue) {
+        if (newValue && newValue.length) {
+          this.active = ""
+          this.shortcuts.forEach(item => {
+            if (item.start_time === newValue[0] && item.end_time === newValue[1]) {
+              this.active = item.key
+            }
+          })
+        } else {
+          this.active = this.dateOptions.active
+          const item = this.shortcuts.find(item => item.key === this.dateOptions.active) || {}
+          if (item.start_time && item.end_time) {
+            this.handleClick(item)
+          }
+        }
+      },
+      immediate: true
+    }
+  },
+  
+  methods: {
+    handleChange(e) {
+      if (!e) {
+        this.$emit("input", [])
+      } else {
+        this.$emit("input", e.map(item => moment(item).format("YYYY-MM-DD")))
+      }
+      this.active = ""
+    },
+    handleClick(item) {
+      this.active = item.key
+      this.$emit("input", [item.start_time, item.end_time])
+    }
+  }
+}
+</script>

package/src/components/form/comps/date-picker-range.vue

@@ -1,78 +1,78 @@
-<template>
-  <div class="b-picker wrapper">
-    <el-date-picker
-      style="width: 70%"
-      v-model="value[config.field]"
-      :start-placeholder="config.startPlaceholder || '开始时间'"
-      :end-placeholder="config.endPlaceholder || '结束时间'"
-      :range-separator="config.rangeSeparator || '-'"
-      :size="config.size || 'mini'"
-      type= "daterange"
-      @input="handleChange"
-    />
-    <div class="btn">
-      <span
-        v-for="item in shortcuts"
-        :key="item.key"
-        class="item"
-        :class="{ item_active: item.key === active }"
-        @click="handleClick(item)"
-      >
-        {{ item.label }}
-      </span>
-    </div>
-  </div>
-</template>
-
-<script>
-import moment from "moment"
-export default {
-  name: 'ByDatePickerRange',
-  props: {
-     //绑定的表单数据
-    value: {
-      type: Object,
-      default: null
-    },
-    //当前配置
-    config: {
-      type: Object,
-      default: null
-    }
-  },
-  data() {
-    return {
-      shortcuts: [
-        { label: "上月", start_time: moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"), end_time: moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"), key: "last_month" },
-        { label: "昨天", start_time: moment().subtract(1, "days").format("YYYY-MM-DD"), end_time: moment().subtract(1, "days").format("YYYY-MM-DD"), key: "yesterday" },
-        { label: "今天", start_time: moment().startOf("day").format("YYYY-MM-DD"), end_time: moment().startOf("day").format("YYYY-MM-DD"), key: "today" },
-        { label: "本周", start_time: moment().startOf("week").format("YYYY-MM-DD"), end_time: moment().endOf("week").format("YYYY-MM-DD"), key: "week" },
-        { label: "本月", start_time: moment().startOf("month").format("YYYY-MM-DD"), end_time: moment().endOf("month").format("YYYY-MM-DD"), key: "month" }
-      ],
-      active: ""
-    }
-  },
-  mounted() {
-    this.active = this.config.active || 'today'
-    const item = this.shortcuts.find(item => item.key === this.active) || {}
-    if (item.start_time && item.end_time) {
-      this.handleClick(item)
-    }
-  },
-  methods: {
-    handleChange(e) {
-      if (!e) {
-        this.$emit("input", [])
-      } else {
-        this.$emit("input", e.map(item => moment(item).format("YYYY-MM-DD")))
-      }
-      this.active = ""
-    },
-    handleClick(item) {
-      this.active = item.key
-      this.value[this.config.field] = [item.start_time, item.end_time]
-      this.$emit("input", [item.start_time, item.end_time])
-    }
-  }
-}
-</script>
+<template>
+  <div class="b-picker wrapper">
+    <el-date-picker
+      style="width: 70%"
+      v-model="value[config.field]"
+      :start-placeholder="config.startPlaceholder || '开始时间'"
+      :end-placeholder="config.endPlaceholder || '结束时间'"
+      :range-separator="config.rangeSeparator || '-'"
+      :size="config.size || 'mini'"
+      type= "daterange"
+      @input="handleChange"
+    />
+    <div class="btn">
+      <span
+        v-for="item in shortcuts"
+        :key="item.key"
+        class="item"
+        :class="{ item_active: item.key === active }"
+        @click="handleClick(item)"
+      >
+        {{ item.label }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from "moment"
+export default {
+  name: 'ByDatePickerRange',
+  props: {
+     //绑定的表单数据
+    value: {
+      type: Object,
+      default: null
+    },
+    //当前配置
+    config: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      shortcuts: [
+        { label: "上月", start_time: moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"), end_time: moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"), key: "last_month" },
+        { label: "昨天", start_time: moment().subtract(1, "days").format("YYYY-MM-DD"), end_time: moment().subtract(1, "days").format("YYYY-MM-DD"), key: "yesterday" },
+        { label: "今天", start_time: moment().startOf("day").format("YYYY-MM-DD"), end_time: moment().startOf("day").format("YYYY-MM-DD"), key: "today" },
+        { label: "本周", start_time: moment().startOf("week").format("YYYY-MM-DD"), end_time: moment().endOf("week").format("YYYY-MM-DD"), key: "week" },
+        { label: "本月", start_time: moment().startOf("month").format("YYYY-MM-DD"), end_time: moment().endOf("month").format("YYYY-MM-DD"), key: "month" }
+      ],
+      active: ""
+    }
+  },
+  mounted() {
+    this.active = this.config.active || 'today'
+    const item = this.shortcuts.find(item => item.key === this.active) || {}
+    if (item.start_time && item.end_time) {
+      this.handleClick(item)
+    }
+  },
+  methods: {
+    handleChange(e) {
+      if (!e) {
+        this.$emit("input", [])
+      } else {
+        this.$emit("input", e.map(item => moment(item).format("YYYY-MM-DD")))
+      }
+      this.active = ""
+    },
+    handleClick(item) {
+      this.active = item.key
+      this.value[this.config.field] = [item.start_time, item.end_time]
+      this.$emit("input", [item.start_time, item.end_time])
+    }
+  }
+}
+</script>

package/src/components/form/comps/pair-number-input.vue

@@ -1,67 +1,67 @@
-<template>
-  <div class="w-full flex">
-    <el-input class="w-1/2" :value="value[0]" :placeholder="earliestPlaceholder" @input="(value) => handleInput(value, 'min')" @blur="(e) => handleBlur(+e.target.value, 'min')" />
-    <span>~</span>
-    <el-input class="w-1/2" :value="value[1]" :placeholder="latestPlaceholder" @input="(value) => handleInput(value, 'max')" @blur="(e) => handleBlur(+e.target.value, 'max')" />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: Array,
-      required: true,
-      default: () => ["", 0]
-    },
-    earliestPlaceholder: {
-      type: String,
-      default: ""
-    },
-    latestPlaceholder: {
-      type: String,
-      default: ""
-    }
-  },
-
-  methods: {
-    /**
-     * 输入框输入回调，将其转换为数字，并反馈到父组件
-     * @param { string } val 输入框的value值
-     * @param { string } type 输入框的类型 min | max
-     */
-    handleInput(val, type) {
-      if (type === "min") {
-        const values = [val.replace(/\D+/, ""), this.value[1]]
-
-        this.$emit("input", values)
-      } else if (type === "max") {
-        const values = [this.value[0], val.replace(/\D+/, "")]
-
-        this.$emit("input", values)
-      }
-    },
-
-    /**
-     * 输入框失去焦点回调，判断最小输入框是否大于最大输入框和最大输入框小于最小输入框，并反馈到父组件
-     * @param { number } val 输入框的value值
-     * @param { string } type 输入框的类型 min | max
-     */
-    handleBlur(val, type) {
-      if (type === "min") {
-        if (val > this.value[1]) {
-          const values = [this.value[1], this.value[1]]
-
-          this.$emit("input", values)
-        }
-      } else if (type === "max") {
-        if (val < this.value[0]) {
-          const values = [this.value[0], this.value[0]]
-
-          this.$emit("input", values)
-        }
-      }
-    }
-  }
-}
-</script>
+<template>
+  <div class="w-full flex">
+    <el-input class="w-1/2" :value="value[0]" :placeholder="earliestPlaceholder" @input="(value) => handleInput(value, 'min')" @blur="(e) => handleBlur(+e.target.value, 'min')" />
+    <span>~</span>
+    <el-input class="w-1/2" :value="value[1]" :placeholder="latestPlaceholder" @input="(value) => handleInput(value, 'max')" @blur="(e) => handleBlur(+e.target.value, 'max')" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Array,
+      required: true,
+      default: () => ["", 0]
+    },
+    earliestPlaceholder: {
+      type: String,
+      default: ""
+    },
+    latestPlaceholder: {
+      type: String,
+      default: ""
+    }
+  },
+
+  methods: {
+    /**
+     * 输入框输入回调，将其转换为数字，并反馈到父组件
+     * @param { string } val 输入框的value值
+     * @param { string } type 输入框的类型 min | max
+     */
+    handleInput(val, type) {
+      if (type === "min") {
+        const values = [val.replace(/\D+/, ""), this.value[1]]
+
+        this.$emit("input", values)
+      } else if (type === "max") {
+        const values = [this.value[0], val.replace(/\D+/, "")]
+
+        this.$emit("input", values)
+      }
+    },
+
+    /**
+     * 输入框失去焦点回调，判断最小输入框是否大于最大输入框和最大输入框小于最小输入框，并反馈到父组件
+     * @param { number } val 输入框的value值
+     * @param { string } type 输入框的类型 min | max
+     */
+    handleBlur(val, type) {
+      if (type === "min") {
+        if (val > this.value[1]) {
+          const values = [this.value[1], this.value[1]]
+
+          this.$emit("input", values)
+        }
+      } else if (type === "max") {
+        if (val < this.value[0]) {
+          const values = [this.value[0], this.value[0]]
+
+          this.$emit("input", values)
+        }
+      }
+    }
+  }
+}
+</script>