99 lines
2.0 KiB
Vue
99 lines
2.0 KiB
Vue
<template>
|
|
<div :class="'counter '+ classname">
|
|
<button @click="click(-1)" class="bleft">-</button>
|
|
<span>{{input}}</span>
|
|
<button @click="click(1)" class="bright">+</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Counter',
|
|
props: {
|
|
min: {type: Number, default: 0},
|
|
max: {type: Number, default: 10},
|
|
inc: {type: Number, default: 1},
|
|
input: {type: Number, default: 1},
|
|
classname: {type: String, default: 'themeGreen'},
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {
|
|
click(dirfactor) {
|
|
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)
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.counter {
|
|
display: inline-block;
|
|
border-radius: 5px;
|
|
padding: 0;
|
|
}
|
|
|
|
.counter button {
|
|
padding: 0;
|
|
width: 15px;
|
|
line-height: 15px;
|
|
/*/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;
|
|
}
|
|
|
|
.themeGreen.counter {
|
|
border: 1px solid #2c3e50;
|
|
background: #d3e3e0;
|
|
color: white;
|
|
}
|
|
|
|
.themeGreen.counter button {
|
|
background: #d3e3e0;
|
|
}
|
|
|
|
.themeGreen .bleft {
|
|
border-right: 1px solid #2c3e50;
|
|
}
|
|
|
|
.themeGreen .bright {
|
|
border-left: 1px solid #2c3e50;
|
|
}
|
|
|
|
.themeGrey.counter {
|
|
border: 0px solid #8ecaf9;
|
|
background: inherit;
|
|
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;
|
|
}
|
|
|
|
</style> |