Convert vue file from ts to js.
This commit is contained in:
parent
8563930e68
commit
109357e8e2
@ -1,53 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import BigNumber from "bignumber.js";
|
||||
|
||||
const unitToByte: { [name: string]: number } = {
|
||||
"unit-k-byte": 1000,
|
||||
"unit-m-byte": 1000 * 1000,
|
||||
"unit-g-byte": 1000 * 1000 * 1000,
|
||||
"unit-t-byte": 1000 * 1000 * 1000 * 1000,
|
||||
"unit-ki-byte": 1024,
|
||||
"unit-mi-byte": 1024 * 1024,
|
||||
"unit-gi-byte": 1024 * 1024 * 1024,
|
||||
"unit-ti-byte": 1024 * 1024 * 1024 * 1024,
|
||||
"unit-byte": 1,
|
||||
"unit-bit": 1 / 8,
|
||||
"unit-k-bit": 1000 / 8,
|
||||
"unit-m-bit": 1000000 / 8,
|
||||
"unit-g-bit": 1000000000 / 8,
|
||||
"unit-t-bit": 1000000000000 / 8,
|
||||
}
|
||||
/**
|
||||
* @typedef {string} UnitNameStr
|
||||
*/
|
||||
|
||||
let variable: { [name: keyof typeof unitToByte]: string } = {
|
||||
"unit-k-byte": '',
|
||||
"unit-m-byte": '',
|
||||
"unit-g-byte": '',
|
||||
"unit-t-byte": '',
|
||||
"unit-ki-byte": '',
|
||||
"unit-mi-byte": '',
|
||||
"unit-gi-byte": '',
|
||||
"unit-ti-byte": '',
|
||||
"unit-byte": '',
|
||||
"unit-bit": '',
|
||||
"unit-k-bit": '',
|
||||
"unit-m-bit": '',
|
||||
"unit-g-bit": '',
|
||||
"unit-t-bit": '',
|
||||
}
|
||||
/**
|
||||
* @enum {UnitNameStr}
|
||||
*/
|
||||
const UnitName = Object.freeze({
|
||||
KBYTE: "unit-k-byte",
|
||||
MBYTE: "unit-m-byte",
|
||||
GBYTE: "unit-g-byte",
|
||||
TBYTE: "unit-t-byte",
|
||||
KIBYTE: "unit-ki-byte",
|
||||
MIBYTE: "unit-mi-byte",
|
||||
GIBYTE: "unit-gi-byte",
|
||||
TIBYTE: "unit-ti-byte",
|
||||
BYTE: "unit-byte",
|
||||
BIT: "unit-bit",
|
||||
KBIT: "unit-k-bit",
|
||||
MBIT: "unit-m-bit",
|
||||
GBIT: "unit-g-bit",
|
||||
TBIT: "unit-t-bit",
|
||||
})
|
||||
|
||||
const size = ref(variable);
|
||||
/**
|
||||
* @enum {number}
|
||||
*/
|
||||
const UnitNameToSize = Object.freeze({
|
||||
[UnitName.KBYTE]: 1000,
|
||||
[UnitName.MBYTE]: 1000 * 1000,
|
||||
[UnitName.GBYTE]: 1000 * 1000 * 1000,
|
||||
[UnitName.TBYTE]: 1000 * 1000 * 1000 * 1000,
|
||||
[UnitName.KIBYTE]: 1024,
|
||||
[UnitName.MIBYTE]: 1024 * 1024,
|
||||
[UnitName.GIBYTE]: 1024 * 1024 * 1024,
|
||||
[UnitName.TIBYTE]: 1024 * 1024 * 1024 * 1024,
|
||||
[UnitName.BYTE]: 1,
|
||||
[UnitName.BIT]: 1 / 8,
|
||||
[UnitName.KBIT]: 1000 / 8,
|
||||
[UnitName.MBIT]: 1000000 / 8,
|
||||
[UnitName.GBIT]: 1000000000 / 8,
|
||||
[UnitName.TBIT]: 1000000000000 / 8,
|
||||
});
|
||||
|
||||
function sizeChanged(unitName: keyof typeof unitToByte):void {
|
||||
let result: { [name in keyof typeof unitToByte]: string } = Object();
|
||||
const size = ref({
|
||||
[UnitName.KBYTE]: '',
|
||||
[UnitName.MBYTE]: '',
|
||||
[UnitName.GBYTE]: '',
|
||||
[UnitName.TBYTE]: '',
|
||||
[UnitName.KIBYTE]: '',
|
||||
[UnitName.MIBYTE]: '',
|
||||
[UnitName.GIBYTE]: '',
|
||||
[UnitName.TIBYTE]: '',
|
||||
[UnitName.BYTE]: '',
|
||||
[UnitName.BIT]: '',
|
||||
[UnitName.KBIT]: '',
|
||||
[UnitName.MBIT]: '',
|
||||
[UnitName.GBIT]: '',
|
||||
[UnitName.TBIT]: '',
|
||||
});
|
||||
|
||||
/**
|
||||
* Change ref variable when user inputs some characters.
|
||||
* @param {UnitNameStr} unitName
|
||||
* @returns {void}
|
||||
*/
|
||||
function sizeChanged(unitName) {
|
||||
/**
|
||||
* @type {object.<UnitNameStr, string>}
|
||||
*/
|
||||
let result = {};
|
||||
// assign 0 to current input if nothing is passed
|
||||
if (size.value[unitName].length === 0) result[unitName] = '0';
|
||||
let inputedBytes: BigNumber = new BigNumber(unitToByte[unitName]).multipliedBy(size.value[unitName]);
|
||||
for (const key in unitToByte) {
|
||||
result[key] = inputedBytes.div(unitToByte[key]).toString();
|
||||
let inputedBytes = new BigNumber(UnitNameToSize[unitName]).multipliedBy(size.value[unitName]);
|
||||
for (const key in UnitNameToSize) {
|
||||
result[key] = inputedBytes.div(UnitNameToSize[key]).toString();
|
||||
}
|
||||
result[unitName] = size.value[unitName];
|
||||
for (const key in unitToByte) {
|
||||
for (const key in UnitNameToSize) {
|
||||
if (result[key] !== 'NaN') {
|
||||
size.value[key] = result[key];
|
||||
} else if (result[key] === 'NaN') {
|
||||
@ -57,7 +90,7 @@ function sizeChanged(unitName: keyof typeof unitToByte):void {
|
||||
}
|
||||
|
||||
const isMultipleOf4KiB = computed(() => {
|
||||
let userInput: BigNumber = new BigNumber(size.value["unit-ki-byte"])
|
||||
let userInput = new BigNumber(size.value[UnitName.KIBYTE]);
|
||||
if (userInput.toNumber() === 0) return false;
|
||||
return userInput.mod(4).toNumber() === 0 ? true : false;
|
||||
})
|
||||
@ -68,80 +101,82 @@ const isMultipleOf4KiB = computed(() => {
|
||||
<div class="unit-conversion-computation-area 1000-in-byte">
|
||||
<p>1000 进制并以 Byte 计: </p>
|
||||
<div class="unit-conversion-computation-node">
|
||||
<input class="size-text" id="unit-k-byte" type="text" v-model="size['unit-k-byte']"
|
||||
@input="sizeChanged('unit-k-byte')">
|
||||
<input class="size-text" :id="UnitName.KBYTE" type="text" v-model="size[UnitName.KBYTE]"
|
||||
@input="sizeChanged(UnitName.KBYTE)">
|
||||
<span class="unit-name">KB</span>
|
||||
</div>
|
||||
<div class="unit-conversion-computation-node">
|
||||
<input class="size-text" id="unit-m-byte" type="text" v-model="size['unit-m-byte']"
|
||||
@input="sizeChanged('unit-m-byte')">
|
||||
<input class="size-text" :id="UnitName.MBYTE" type="text" v-model="size[UnitName.MBYTE]"
|
||||
@input="sizeChanged(UnitName.MBYTE)">
|
||||
<span class="unit-name">MB</span>
|
||||
</div>
|
||||
<div class="unit-conversion-computation-node">
|
||||
<input class="size-text" id="unit-g-byte" type="text" v-model="size['unit-g-byte']"
|
||||
@input="sizeChanged('unit-g-byte')">
|
||||
<input class="size-text" :id="UnitName.GBYTE" type="text" v-model="size[UnitName.GBYTE]"
|
||||
@input="sizeChanged(UnitName.GBYTE)">
|
||||
<span class="unit-name">GB</span>
|
||||
</div>
|
||||
<div class="unit-conversion-computation-node">
|
||||
<input class="size-text" id="unit-t-byte" type="text" v-model="size['unit-t-byte']"
|
||||
@input="sizeChanged('unit-t-byte')">
|
||||
<input class="size-text" :id="UnitName.TBYTE" type="text" v-model="size[UnitName.TBYTE]"
|
||||
@input="sizeChanged(UnitName.TBYTE)">
|
||||
<span class="unit-name">TB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="unit-conversion-computation-area 1024-in-byte">
|
||||
<p>1024 进制并以 Byte 计</p>
|
||||
<div class="unit-conversion-computation-node">
|
||||
<input class="size-text" id="unit-ki-byte" type="text" v-model="size['unit-ki-byte']"
|
||||
@input="sizeChanged('unit-ki-byte')">
|
||||
<input class="size-text" :id="UnitName.KIBYTE" type="text" v-model="size[UnitName.KIBYTE]"
|
||||
@input="sizeChanged(UnitName.KIBYTE)">
|
||||
<span class="unit-name">KiB</span>
|
||||
</div>
|
||||
<div class="unit-conversion-computation-node">
|
||||
<input class="size-text" id="unit-mi-byte" type="text" v-model="size['unit-mi-byte']"
|
||||
@input="sizeChanged('unit-mi-byte')">
|
||||
<input class="size-text" :id="UnitName.MIBYTE" type="text" v-model="size[UnitName.MIBYTE]"
|
||||
@input="sizeChanged(UnitName.MIBYTE)">
|
||||
<span class="unit-name">MiB</span>
|
||||
</div>
|
||||
<div class="unit-conversion-computation-node">
|
||||
<input class="size-text" id="unit-gi-byte" type="text" v-model="size['unit-gi-byte']"
|
||||
@input="sizeChanged('unit-gi-byte')">
|
||||
<input class="size-text" :id="UnitName.GIBYTE" type="text" v-model="size[UnitName.GIBYTE]"
|
||||
@input="sizeChanged(UnitName.GIBYTE)">
|
||||
<span class="unit-name">GiB</span>
|
||||
</div>
|
||||
<div class="unit-conversion-computation-node">
|
||||
<input class="size-text" id="unit-ti-byte" type="text" v-model="size['unit-ti-byte']"
|
||||
@input="sizeChanged('unit-ti-byte')">
|
||||
<input class="size-text" :id="UnitName.TIBYTE" type="text" v-model="size[UnitName.TIBYTE]"
|
||||
@input="sizeChanged(UnitName.TIBYTE)">
|
||||
<span class="unit-name">TiB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="unit-conversion-computation-area byte-bit">
|
||||
<p>以 Byte (B) / bit (b) 计:</p>
|
||||
<div class="unit-conversion-computation-node">
|
||||
<input class="size-text" id="unit-byte" type="text" v-model="size['unit-byte']" @input="sizeChanged('unit-byte')">
|
||||
<input class="size-text" :id="UnitName.BYTE" type="text" v-model="size[UnitName.BYTE]"
|
||||
@input="sizeChanged(UnitName.BYTE)">
|
||||
<span class="unit-name">B</span>
|
||||
</div>
|
||||
<div class="unit-conversion-computation-node">
|
||||
<input class="size-text" id="unit-bit" type="text" v-model="size['unit-bit']" @input="sizeChanged('unit-bit')">
|
||||
<input class="size-text" :id="UnitName.BIT" type="text" v-model="size[UnitName.BIT]"
|
||||
@input="sizeChanged(UnitName.BIT)">
|
||||
<span class="unit-name">b</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="unit-conversion-computation-area 1000-in-bit">
|
||||
<p>1000 进制并以 bit 计:</p>
|
||||
<div class="unit-conversion-computation-node">
|
||||
<input class="size-text" id="unit-k-bit" type="text" v-model="size['unit-k-bit']"
|
||||
@input="sizeChanged('unit-k-bit')">
|
||||
<input class="size-text" :id="UnitName.KBIT" type="text" v-model="size[UnitName.KBIT]"
|
||||
@input="sizeChanged(UnitName.KBIT)">
|
||||
<span class="unit-name">Kb</span>
|
||||
</div>
|
||||
<div class="unit-conversion-computation-node">
|
||||
<input class="size-text" id="unit-m-bit" type="text" v-model="size['unit-m-bit']"
|
||||
@input="sizeChanged('unit-m-bit')">
|
||||
<input class="size-text" :id="UnitName.MBIT" type="text" v-model="size[UnitName.MBIT]"
|
||||
@input="sizeChanged(UnitName.MBIT)">
|
||||
<span class="unit-name">Mb</span>
|
||||
</div>
|
||||
<div class="unit-conversion-computation-node">
|
||||
<input class="size-text" id="unit-g-bit" type="text" v-model="size['unit-g-bit']"
|
||||
@input="sizeChanged('unit-g-bit')">
|
||||
<input class="size-text" :id="UnitName.GBIT" type="text" v-model="size[UnitName.GBIT]"
|
||||
@input="sizeChanged(UnitName.GBIT)">
|
||||
<span class="unit-name">Gb</span>
|
||||
</div>
|
||||
<div class="unit-conversion-computation-node">
|
||||
<input class="size-text" id="unit-t-bit" type="text" v-model="size['unit-t-bit']"
|
||||
@input="sizeChanged('unit-t-bit')">
|
||||
<input class="size-text" :id="UnitName.TBIT" type="text" v-model="size[UnitName.TBIT]"
|
||||
@input="sizeChanged(UnitName.TBIT)">
|
||||
<span class="unit-name">Tb</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user