我要评论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">
<input
type="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 input
if (!inputnumber.value) {
result.value = '';
return;
}
// check if the input number is valid for the selected base
const isvalid = /^[0-9a-z.]+$/i.test(inputnumber.value);
if (!isvalid) {
result.value = '输入包含无效字符';
return;
}
// separate integer and fractional parts
const [integerpartstr, fractionalpartstr = ''] = inputnumber.value.split('.');
// convert integer part
const integerpartdecimal = parseint(integerpartstr, frombase.value);
if (isnan(integerpartdecimal)) {
result.value = '无效的输入数字';
return;
}
const integerpartresult = integerpartdecimal.tostring(tobase.value).touppercase();
// convert fractional part if it exists
let 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 digits
tempdecimal *= 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>到此这篇关于vue实现在线进制转换的文章就介绍到这了,更多相关vue在线进制转换内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论