imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Conformance: time duration component fix bug.

Browse Source
This commit is contained in:
chiayin
2023-08-28 17:01:26 +08:00
parent 83485fa8aa
commit b897b163aa
5 changed files with 90 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/durationjs.vue
View File

@@ -1,15 +1,12 @@
<template>
<div class=" relative">
<div class="flex justify-center items-center gap-1 px-1 w-32 border border-neutral-500 cursor-pointer" @click="openTiemSelect = !openTiemSelect">
<div class="flex justify-center items-center gap-1 px-1 w-32 border border-neutral-500 cursor-pointer" @click="openTimeSelect = !openTimeSelect">
<p>{{ days }}d</p>
<p>{{ hours }}h</p>
<p>{{ minutes }}m</p>
<p>{{ seconds }}s</p>
</div>
<p>maxTotal: {{ maxTotal }}</p>
<p>minTotal: {{ minTotal }}</p>
<p>size: {{ size }}</p>
<div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTiemSelect">
<div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect">
<div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
<input
type="text"
@@ -69,13 +66,7 @@ export default {
minTotal: null,
inputTypes: [],
lastInput: null,
openTiemSelect: false,
// tUnits: {
// s: { dsp: 's', inc: 1, val: 0, max: 60, rate: 1, min: 0 },
// m: { dsp: 'm', inc: 1, val: 0, max: 60, rate: 60, min: 0 },
// h: { dsp: 'h', inc: 1, val: 0, max: 24, rate: 3600, min: 0 },
// d: { dsp: 'd', inc: 1, val: 0, max: this.maxDays, rate: 86400, min: this.minDays }
// },
openTimeSelect: false,
};
},
computed: {
@@ -101,15 +92,20 @@ export default {
},
},
watch: {
max: function(newValue, oldValue) {
max: {
handler: function(newValue, oldValue) {
this.maxTotal = newValue;
this.size === 'max' && newValue !== oldValue ? this.createData() : null;
},
min: function(newValue, oldValue) {
this.minTotal = newValue;
this.size === 'min' && newValue !== oldValue ? this.createData() : null;
immediate: true,
},
min: {
handler: function(newValue, oldValue) {
this.minTotal = newValue;
this.size === 'min' && newValue !== oldValue ? this.createData() : null;
},
immediate: true,
}
},
methods: {
onFocus(event) {
@@ -126,8 +122,11 @@ export default {
const inputValue = parseInt(event.target.value, 10);
const max = parseInt(event.target.dataset.max, 10); // 設定最大值
const min = parseInt(event.target.dataset.min, 10);
if(inputValue > max) event.target.value = max.toString().padStart(2, '0');
else if(inputValue < min) event.target.value= min.toString().padStart(2, '0');
if(inputValue > max) {
event.target.value = max.toString().padStart(2, '0');
this.totalSeconds = this.maxTotal;
this.secondToDate(this.maxTotal, 'max');
}else if(inputValue < min) event.target.value= min.toString().padStart(2, '0');
// 數值更新, tUnits 也更新, 並計算 totalSeconds
const dsp = event.target.dataset.tunit;
@@ -179,9 +178,9 @@ export default {
newVal = '00';
} else {
newVal = '00';
};
};
};
}
}
}
input.value = newVal.toString().padStart(2, '0');
switch (tUnit) {
@@ -214,12 +213,6 @@ export default {
},
calculateTotalSeconds() {
let totalSeconds = 0;
let tUnits = {
s: { dsp: 's', inc: 1, val: this.seconds, max: 60, rate: 1, min: 0 },
m: { dsp: 'm', inc: 1, val: this.minutes, max: 60, rate: 60, min: 0 },
h: { dsp: 'h', inc: 1, val: this.hours, max: 24, rate: 3600, min: 0 },
d: { dsp: 'd', inc: 1, val: this.days, max: this.maxDays, rate: 86400, min: this.minDays },
};
for (const unit in this.tUnits) {
const val = parseInt(this.tUnits[unit].val, 10);
@@ -228,47 +221,41 @@ export default {
}
}
// 大於最大值時要等於最大值
console.log(totalSeconds);
if(totalSeconds >= this.maxTotal){
console.log('>max');
if(totalSeconds >= this.maxTotal){ // 大於最大值時要等於最大值
totalSeconds = this.maxTotal;
this.tUnits = tUnits;
} else if (totalSeconds <= this.minTotal) {
console.log('<min');
// 小於最小值時要等於最小值
} else if (totalSeconds <= this.minTotal) { // 小於最小值時要等於最小值
totalSeconds = this.minTotal;
this.tUnits = tUnits;
this.secondToDate(this.minTotal, 'min');
} else {
this.totalSeconds = totalSeconds;
};
// this.$emit('total-seconds', this.totalSeconds);
this.$emit('total-seconds', this.totalSeconds);
},
createData() {
// let size = 'min';
async createData() {
let size = this.size;
switch (size) {
case 'max':
this.secondToDate(this.minTotal, 'min');
this.secondToDate(this.maxTotal, 'max');
this.totalSeconds = this.maxTotal;
break;
case 'min':
this.secondToDate(this.maxTotal, 'max');
this.secondToDate(this.minTotal, 'min');
this.totalSeconds = this.minTotal;
break;
default:
break;
};
// this.$emit('total-seconds', this.totalSeconds);
if (this.maxTotal !== await null && this.minTotal !== await null) {
switch (size) {
case 'max':
this.secondToDate(this.minTotal, 'min');
this.secondToDate(this.maxTotal, 'max');
this.totalSeconds = this.maxTotal;
break;
case 'min':
this.secondToDate(this.maxTotal, 'max');
this.secondToDate(this.minTotal, 'min');
this.totalSeconds = this.minTotal;
break;
default:
break;
}
this.$emit('total-seconds', this.totalSeconds);
}
},
},
mounted() {
this.inputTypes = this.display.split('');
this.createData();
// this.createData();
},
};
</script>