vue 应用 : 计数器组件

 <template>
   <div class="input-number">
     <div @click="sub" :class="(islight ? 'light' : '') + ' sub'">-</div>
     <div class="num">{{ ipt }}</div>
     <div class="add" @click="add">+</div>
   </div>
 </template>

 <script>
 export default {
     name: 'CRInputnumber',
     componentName: 'CRInputnumber',

     data() {
       return {
         ipt:1,
         islight: true,
       }
     },
     created() {
         if (this.count > 0) {
             this.ipt = this.count
         }
         this.islight = this.lightFunc()
     },
      props: {
          count:{
               type: Number,
               default: 1
         },
      },
      methods: {
     // 减少数量
         sub: function () {
             if (this.ipt < 2) {
                 return
             }
             this.ipt--
             this.islight = this.lightFunc()
         },
         // 增加数量
         add: function () {
             this.ipt++
             this.islight = this.lightFunc()
         },
         lightFunc(){
             if (this.ipt < 2) {
                 return true
             } else {
                 return false
             }
         }
     }

 }
 </script>

 <style lang="LESS" scoped>
 @fs12:3.2vw;
 @fs14:3.733vw;
 @fs15:4vw;
 @fs16:4.267vw;
 @fs17:4.533vw;
 @fs20:5.333vw;
 @fs22:5.867vw;

 @pd1:2.666vw;
 @pd2:3.333vw;
 @bw:100vw;
 @bh:23.333vw;
 @iw:16.666vw;
 @black:#4c4948;
 @gray:#bfc0c0;

 body,p,h1,h2,h3,h4,h5,h6,img{
     padding: 0;
     margin:0;
     border:0;
 }
 div,span,p{
     font-size: @fs12;
 }
     .input-number{
         color: @black;
         font-size: @fs20;

         min-width: 4.5625rem;
         height: 1.375rem;
         box-sizing: border-box;
         border: 1px solid #e5e5e5;
         position: relative;
         margin-top: -0.6875rem;
         top:50%;
         display: flex;
         justify-content: space-between;
         .sub,.add,.num{
             height: 100%;
             line-height: 1.25rem;
             text-align: center;
         }
         .sub,.add{
             width: 1.375rem;
             transform: scale(1.5,1.5) translateY(-0.3vw);
         }
         .num{
             border-left:1px solid #e5e5e5;
             border-right:1px solid #e5e5e5;
             padding: 0 0.6rem;
             font-weight: 700;
         }

         .light{
             color: #e5e5e5;
         }
     }

 </style>