90 lines
2.1 KiB
Vue
90 lines
2.1 KiB
Vue
<template>
|
|
<div class="flex justify-between items-center">
|
|
<Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" :updateMax="updateMax" @total-seconds="minTotalSeconds"></Durationjs>
|
|
<span>~</span>
|
|
<Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" @total-seconds="maxTotalSeconds"></Durationjs>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Durationjs from '@/components/durationjs.vue';
|
|
|
|
export default {
|
|
props: ['time', 'select'],
|
|
data() {
|
|
return {
|
|
timeData: {
|
|
min: 0,
|
|
max: 0,
|
|
},
|
|
timeRangeMin: 0,
|
|
timeRangeMax: 0,
|
|
minVuemin: 0,
|
|
minVuemax: 0,
|
|
maxVuemin: 0,
|
|
maxVuemax: 0,
|
|
updateMax: null,
|
|
}
|
|
},
|
|
components: {
|
|
Durationjs,
|
|
},
|
|
watch: {
|
|
time: {
|
|
handler: function(newValue, oldValue) {
|
|
if(newValue == null) {
|
|
this.timeData = {
|
|
min: 0,
|
|
max: 0
|
|
};
|
|
}else if(newValue != null) {
|
|
this.timeData = {
|
|
min: newValue.min,
|
|
max: newValue.max
|
|
};
|
|
this.$emit('min-total-seconds', newValue.min);
|
|
this.$emit('max-total-seconds', newValue.max);
|
|
}
|
|
this.setTimeValue();
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
},
|
|
methods: {
|
|
/**
|
|
* set props values
|
|
*/
|
|
setTimeValue() {
|
|
// 深拷貝原始 timeData 的內容
|
|
this.minVuemin = JSON.parse(JSON.stringify(this.timeData.min));
|
|
this.minVuemax = JSON.parse(JSON.stringify(this.timeData.max));
|
|
this.maxVuemin = JSON.parse(JSON.stringify(this.timeData.min));
|
|
this.maxVuemax = JSON.parse(JSON.stringify(this.timeData.max));
|
|
},
|
|
/**
|
|
* get min total seconds
|
|
* @param {Number} e
|
|
*/
|
|
minTotalSeconds(e) {
|
|
this.timeRangeMin = e;
|
|
this.$emit('min-total-seconds', e);
|
|
},
|
|
/**
|
|
* get min total seconds
|
|
* @param {Number} e
|
|
*/
|
|
maxTotalSeconds(e) {
|
|
this.timeRangeMax = e;
|
|
this.updateMax = e;
|
|
this.$emit('max-total-seconds', e);
|
|
},
|
|
},
|
|
created() {
|
|
if(this.select){
|
|
this.timeData = this.select;
|
|
this.setTimeValue();
|
|
}
|
|
}
|
|
}
|
|
</script>
|