- {{value}}
+ {{input}}
@@ -17,18 +17,16 @@
classname: {type: String, default: 'themeGreen'},
},
data() {
- return {
- value: this.input,
- }
+ return {}
},
methods: {
click(dirfactor) {
- this.value = this.value + (dirfactor * this.inc)
- if (this.value > this.max) this.value = this.max
- if (this.value < this.min) this.value = this.min
- this.$emit('input', this.value)
+ let input = this.input + (dirfactor * this.inc)
+ if (input > this.max) input = this.max
+ if (input < this.min) input = this.min
+ this.$emit('input', input)
}
- }
+ },
}
@@ -44,16 +42,18 @@
padding: 0;
width: 15px;
line-height: 15px;
- /*/margin: 0 px 3 px 0 px 3 px;*/
+ /*/margin: 0 px 3 px 0 px 3 px;*/
}
.bleft, .bright {
border: 0px solid red;
border-radius: 5px;
}
+
.bleft {
margin-right: 3px;
}
+
.bright {
margin-left: 3px;
}
@@ -61,14 +61,17 @@
.themeGreen.counter {
border: 1px solid #2c3e50;
background: #d3e3e0;
- color:white;
+ color: white;
}
+
.themeGreen.counter button {
background: #d3e3e0;
}
+
.themeGreen .bleft {
border-right: 1px solid #2c3e50;
}
+
.themeGreen .bright {
border-left: 1px solid #2c3e50;
}
@@ -76,16 +79,19 @@
.themeGrey.counter {
border: 0px solid #8ecaf9;
background: inherit;
- color:white;
+ color: white;
}
+
.themeGrey.counter button {
background: #767676;
width: 18px;
line-height: 18px;
}
+
.themeGrey .bleft {
border-right: 0px solid #8ecaf9;
}
+
.themeGrey .bright {
border-left: 0px solid #8ecaf9;
}