1 <template> 2 <div class="input-number"> 3 <div @click="sub" :class="(islight ? 'light' : '') + ' sub'">-</div> 4 <div class="num">{{ ipt }}</div> 5 <div class="add" @click="add">+</div> 6 </div> 7 </template> 8 9 <script> 10 export default { 11 name: 'CRInputnumber', 12 componentName: 'CRInputnumber', 13 14 data() { 15 return { 16 ipt:1, 17 islight: true, 18 } 19 }, 20 created() { 21 if (this.count > 0) { 22 this.ipt = this.count 23 } 24 this.islight = this.lightFunc() 25 }, 26 props: { 27 count:{ 28 type: Number, 29 default: 1 30 }, 31 }, 32 methods: { 33 // 减少数量 34 sub: function () { 35 if (this.ipt < 2) { 36 return 37 } 38 this.ipt-- 39 this.islight = this.lightFunc() 40 }, 41 // 增加数量 42 add: function () { 43 this.ipt++ 44 this.islight = this.lightFunc() 45 }, 46 lightFunc(){ 47 if (this.ipt < 2) { 48 return true 49 } else { 50 return false 51 } 52 } 53 } 54 55 56 } 57 </script> 58 59 <style lang="LESS" scoped> 60 @fs12:3.2vw; 61 @fs14:3.733vw; 62 @fs15:4vw; 63 @fs16:4.267vw; 64 @fs17:4.533vw; 65 @fs20:5.333vw; 66 @fs22:5.867vw; 67 68 @pd1:2.666vw; 69 @pd2:3.333vw; 70 @bw:100vw; 71 @bh:23.333vw; 72 @iw:16.666vw; 73 @black:#4c4948; 74 @gray:#bfc0c0; 75 76 body,p,h1,h2,h3,h4,h5,h6,img{ 77 padding: 0; 78 margin:0; 79 border:0; 80 } 81 div,span,p{ 82 font-size: @fs12; 83 } 84 .input-number{ 85 color: @black; 86 font-size: @fs20; 87 88 min-width: 4.5625rem; 89 height: 1.375rem; 90 box-sizing: border-box; 91 border: 1px solid #e5e5e5; 92 position: relative; 93 margin-top: -0.6875rem; 94 top:50%; 95 display: flex; 96 justify-content: space-between; 97 .sub,.add,.num{ 98 height: 100%; 99 line-height: 1.25rem; 100 text-align: center; 101 } 102 .sub,.add{ 103 width: 1.375rem; 104 transform: scale(1.5,1.5) translateY(-0.3vw); 105 } 106 .num{ 107 border-left:1px solid #e5e5e5; 108 border-right:1px solid #e5e5e5; 109 padding: 0 0.6rem; 110 font-weight: 700; 111 } 112 118 .light{ 119 color: #e5e5e5; 120 } 121 } 122 123 </style>