初始化万家商超用户端仓库

components/benben-flex-number-box/benben-flex-number-box.vue

@@ -0,0 +1,133 @@
+<template>
+  <view :class="className">
+     <view @tap.stop="_calcValue('minus')" :class="minDisabled?'disabledBtn':''">
+       <slot name="minus"></slot>
+     </view>
+      <input 
+         :class="inputClass"
+         :disabled="disabled" 
+         type="number" 
+         v-model="inputValue" 
+         @input="changeValue" />
+     <view @tap.stop="_calcValue('plus')" :class="maxDisabled?'disabledBtn':''">
+       <slot name="plus"></slot>
+     </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'benben-flex-number-box',
+  props: {
+    value: {
+      type: [Number, String],
+      default: 1,
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: Infinity,
+    },
+    step: {
+      type: Number,
+      default: 1,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    inputClass:{
+      type: String,
+      default: '',
+    },
+    className:{
+      type: String,
+      default: '',
+    },
+  },
+  data: () => ({
+    inputValue: 0,
+    timer: null,
+  }),
+  computed: {
+    minDisabled () {
+      return this.inputValue <= this.min || this.disabled
+    },
+    maxDisabled () {
+      return this.inputValue >= this.max || this.disabled
+    }
+  },
+  //监听value
+  watch: {
+    value: {
+      handler(val) {
+        this.inputValue = +val
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    _calcValue(type) {
+      if (type === 'minus' && !this.disabled && this.inputValue == this.min) return
+      if (this.disabled) return
+      if (this.max < this.inputValue) {
+        this.inputValue = this.max
+      }
+      let value = this.inputValue
+      let step = this.step
+      if (type === 'minus') {
+        value -= step
+        if (value < this.min) return
+        if (value > this.max) {
+          value = this.max
+        }
+      } else if (type === 'plus') {
+        value += step
+        if (value > this.max) return
+        if (value < this.min) {
+          value = this.min
+        }
+      }
+      this.inputValue = parseInt(Number(value))
+      this.$emit('input', this.inputValue)
+    },
+    changeValue(e) {
+      let value = e.detail.value
+      if (!value) {
+        this.inputValue = this.min
+        return
+      }
+      if (value > this.max) {
+        value = this.max
+      } else if (value < this.min) {
+        value = this.min
+      }
+      setTimeout(() => {
+        this.inputValue = parseInt(Number(value))
+        this.$emit('input', this.inputValue)
+      }, 400)
+    },
+  },
+  mounted() {},
+  // 组件周期函数--监听组件数据更新之前
+  beforeUpdate() {},
+  // 组件周期函数--监听组件数据更新之后
+  updated() {},
+  // 组件周期函数--监听组件激活(显示)
+  activated() {},
+  // 组件周期函数--监听组件停用(隐藏)
+  deactivated() {},
+  // 组件周期函数--监听组件销毁之前
+  beforeDestroy() {},
+}
+</script>
+
+<style>
+.disabledBtn{
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>