SliderTimeRow.vue 1.05 KB
Newer Older
Anton's avatar
Anton committed
1 2 3 4 5
<template lang="pug">
  q-item.no-padding
    q-item-side
      q-btn.no-shadow(@click="handlerButton('down')", round, size="sm", icon="remove", color="transparent")
    q-item-main
Anton's avatar
Anton committed
6
      q-slider(v-model="valueInternal", :min="0", :max="max", :label-value="`${type}: ${valueInternal}`", label-always)
Anton's avatar
Anton committed
7 8 9 10 11 12
    q-item-side
      q-btn.no-shadow(@click="handlerButton('up')", round, size="sm", icon="add", color="transparent")
</template>

<script>
  export default {
Anton's avatar
Anton committed
13 14 15 16
    props: ['value', 'max', 'suffix', 'type'],
    data () {
      return {
        valueInternal: undefined
Anton's avatar
Anton committed
17
      }
Anton's avatar
Anton committed
18 19 20
    },
    mounted () {
      this.valueInternal = this.value
Anton's avatar
Anton committed
21 22
    },
    watch: {
Anton's avatar
Anton committed
23 24
      value (val) {
        if (val !== this.valueInternal) this.valueInternal = val
Anton's avatar
Anton committed
25
      },
Anton's avatar
Anton committed
26 27
      valueInternal (val) {
        this.$emit('update', { [this.type]: val })
Anton's avatar
Anton committed
28 29 30 31
      }
    },
    methods: {
      handlerButton (val) {
Anton's avatar
Anton committed
32 33
        if (val === 'up' && this.valueInternal < this.max) this.valueInternal++
        else if (val === 'down' && this.valueInternal > 0) this.valueInternal--
Anton's avatar
Anton committed
34 35 36 37
      }
    }
  }
</script>