vue實現在線進制轉換

主要功能包括：

1.支持2-36進制之間的轉換。
2.支持整數和浮點數的轉換。
3.輸入驗證（雖然可能存在不嚴格的情況）。
4.錯誤提示。
5.結果展示，包括大寫字母。
6.用戶友好的界面，包括下拉菜單、輸入框、按鈕和結果區域。
7.小數部分處理，限制精度為10位。
8.即時轉換（通過按鈕觸發，而非實時響應）。

效果圖：

step1:C:\Users\wangrusheng\PycharmProjects\untitled18\src\views\Home.vue

<template><div class="converter-container"><h1>在線進制轉換</h1><p class="description">支持在2~36進制之間進行任意轉換，支持浮點型</p><div class="converter-wrapper"><div class="converter-row"><div class="select-group"><select v-model="fromBase" class="base-select"><option v-for="n in bases" :value="n">{{ n }}進制</option></select></div><div class="input-group"><inputtype="text"v-model="inputNumber"placeholder="轉換數字"class="number-input"></div></div><div class="converter-row"><div class="select-group"><select v-model="toBase" class="base-select"><option v-for="n in bases" :value="n">{{ n }}進制</option></select></div><div class="result-group"><div class="result-display">{{ result }}</div></div></div></div><button @click="convert" class="convert-btn">立即轉換</button></div>
</template><script setup>
import { ref, computed } from 'vue'const fromBase = ref(16)
const toBase = ref(10)
const inputNumber = ref('3c')
const result = ref('')
const bases = Array.from({ length: 35 }, (_, i) => i + 2); // 生成 2 到 36 的進制數組const convert = () => {try {// Handle empty inputif (!inputNumber.value) {result.value = '';return;}// Check if the input number is valid for the selected baseconst isValid = /^[0-9a-z.]+$/i.test(inputNumber.value);if (!isValid) {result.value = '輸入包含無效字符';return;}// Separate integer and fractional partsconst [integerPartStr, fractionalPartStr = ''] = inputNumber.value.split('.');// Convert integer partconst integerPartDecimal = parseInt(integerPartStr, fromBase.value);if (isNaN(integerPartDecimal)) {result.value = '無效的輸入數字';return;}const integerPartResult = integerPartDecimal.toString(toBase.value).toUpperCase();// Convert fractional part if it existslet fractionalPartResult = '';if (fractionalPartStr) {let decimalFraction = 0;for (let i = 0; i < fractionalPartStr.length; i++) {const digit = parseInt(fractionalPartStr[i], fromBase.value);if (isNaN(digit) || digit >= fromBase.value) {result.value = '無效的小數部分';return;}decimalFraction += digit * Math.pow(fromBase.value, -(i + 1));}let tempFractionalResult = '';let tempDecimal = decimalFraction;for (let i = 0; i < 10; i++) { // Limit precision to 10 digitstempDecimal *= toBase.value;const integerPart = Math.floor(tempDecimal);tempFractionalResult += integerPart.toString(toBase.value).toUpperCase();tempDecimal -= integerPart;if (tempDecimal === 0) {break;}}fractionalPartResult = '.' + tempFractionalResult;}result.value = integerPartResult + fractionalPartResult;} catch (error) {result.value = '轉換出錯';console.error("Conversion error:", error);}
}
</script><style scoped>
.converter-container {max-width: 600px;margin: 20px auto;padding: 20px;background: #fff;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}h1 {text-align: center;color: #333;margin-bottom: 10px;
}.description {text-align: center;color: #666;margin-bottom: 30px;
}.converter-wrapper {margin: 20px 0;
}.converter-row {display: flex;gap: 10px;margin-bottom: 15px;
}.select-group, .input-group, .result-group {flex: 1;
}.base-select, .number-input {width: 100%;padding: 12px;border: 1px solid #fff;border-radius: 4px;font-size: 16px;
}.result-display {padding: 12px;background: #f8f9fa;border: 1px solid #eee;border-radius: 4px;min-height: 46px;
}.convert-btn {width: 100%;padding: 12px;background: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 16px;transition: background 0.3s;
}.convert-btn:hover {background: #0056b3;
}
</style>

end