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 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>