vue 应用 : 计数器组件

  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>