Browse Source

feat: stepper判断max小于min的情况

yangxiaolu3 5 years ago
parent
commit
ff9392b328
1 changed files with 18 additions and 5 deletions
  1. 18 5
      src/packages/stepper/stepper.vue

+ 18 - 5
src/packages/stepper/stepper.vue

@@ -6,7 +6,7 @@
       type="number"
       type="number"
       :min="minNum"
       :min="minNum"
       :max="max"
       :max="max"
-      :readonly="readonly"
+      :readonly="readonly || !this.isLegal"
       :value="num | maxv(minNum, max)"
       :value="num | maxv(minNum, max)"
       :style="{ visibility: showNum ? 'visible' : 'hidden' }"
       :style="{ visibility: showNum ? 'visible' : 'hidden' }"
       @input="numchange"
       @input="numchange"
@@ -42,7 +42,7 @@
       <div>{{ animNum[0] }}</div>
       <div>{{ animNum[0] }}</div>
       <div>{{ animNum[1] }}</div>
       <div>{{ animNum[1] }}</div>
     </div>
     </div>
-    <div class="oper-wrapper add-wrapper" @click="add()"><span  :class="{ 'nut-stepper-grey': max && Number(num) > max - step }" v-html="require('../../assets/svg/add.svg')"> </span></div>
+    <div class="oper-wrapper add-wrapper" @click="add()"><span  :class="{ 'nut-stepper-grey': max && Number(num) > (max - step) || !this.isLegal}" v-html="require('../../assets/svg/add.svg')"> </span></div>
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
@@ -93,7 +93,8 @@ export default {
       showReduceAnim: false,
       showReduceAnim: false,
       animNum: [this.value, this.value],
       animNum: [this.value, this.value],
       animTranslate_add: 0,
       animTranslate_add: 0,
-      animTranslate_: -100
+      animTranslate_: -100,
+      isLegal:true //是否合法 isLegal
     };
     };
   },
   },
   filters: {
   filters: {
@@ -116,8 +117,20 @@ export default {
     },
     },
     min: {
     min: {
       handler(v, ov) {
       handler(v, ov) {
+        this.isLegal = true
         if (v < this.max) {
         if (v < this.max) {
           this.minNum = v;
           this.minNum = v;
+        }else{
+          this.isLegal = false
+        }
+      },
+      immediate: true
+    },
+    max: {
+      handler(v, ov) {
+        this.isLegal = true
+        if (v <= this.min) {
+          this.isLegal = false
         }
         }
       },
       },
       immediate: true
       immediate: true
@@ -130,7 +143,7 @@ export default {
   },
   },
   methods: {
   methods: {
     focus(e) {
     focus(e) {
-      if (this.readonly) return;
+      if (this.readonly || !this.isLegal) return;
       // clear val temporary when focus, e...s
       // clear val temporary when focus, e...s
       //选中选择框值
       //选中选择框值
       this.$refs.number.select();
       this.$refs.number.select();
@@ -142,7 +155,7 @@ export default {
       this.$emit('focus', e, this.num);
       this.$emit('focus', e, this.num);
     },
     },
     blur(e) {
     blur(e) {
-      if (this.readonly) return this.$emit('blur', e, this.num);
+      if (this.readonly || !this.isLegal) return this.$emit('blur', e, this.num);
       let v = e.target.value;
       let v = e.target.value;
       this.minNum = this.min;
       this.minNum = this.min;
       this.focusing = false;
       this.focusing = false;