vue实现在线进制转换

主要功能包括：
1.支持2-36进制之间的转换。
2.支持整数和浮点数的转换。
3.输入验证（虽然可能存在不严格的情况）。
4.错误提示。
5.结果展示，包括大写字母。
6.用户友好的界面，包括下拉菜单、输入框、按钮和结果区域。
7.小数部分处理，限制精度为10位。
8.即时转换（通过按钮触发，而非实时响应）。
效果图：

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

1. <template>
   
2.   <div class="converter-container">
   
3.     <h1>在线进制转换</h1>
   
4.     <p class="description">支持在2~36进制之间进行任意转换，支持浮点型</p>
   
5.     <div class="converter-wrapper">
   
6.       <div class="converter-row">
   
7.         <div class="select-group">
   
8.           <select v-model="fromBase" class="base-select">
   
9.             <option v-for="n in bases" :value="n">{{ n }}进制</option>
   
10.           </select>
    
11.         </div>
    
12.         <div class="input-group">
    
13.           <input
    
14.             type="text"
    
15.             v-model="inputNumber"
    
16.             placeholder="转换数字"
    
17.             class="number-input"
    
18.           >
    
19.         </div>
    
20.       </div>
    
21.       <div class="converter-row">
    
22.         <div class="select-group">
    
23.           <select v-model="toBase" class="base-select">
    
24.             <option v-for="n in bases" :value="n">{{ n }}进制</option>
    
25.           </select>
    
26.         </div>
    
27.         <div class="result-group">
    
28.           <div class="result-display">{{ result }}</div>
    
29.         </div>
    
30.       </div>
    
31.     </div>
    
32.     <button @click="convert" class="convert-btn">立即转换</button>
    
33.   </div>
    
34. </template>
    
35. <script setup>
    
36. import { ref, computed } from 'vue'
    
37. const fromBase = ref(16)
    
38. const toBase = ref(10)
    
39. const inputNumber = ref('3c')
    
40. const result = ref('')
    
41. const bases = Array.from({ length: 35 }, (_, i) => i + 2); // 生成 2 到 36 的进制数组
    
42. const convert = () => {
    
43.   try {
    
44.     // Handle empty input
    
45.     if (!inputNumber.value) {
    
46.       result.value = '';
    
47.       return;
    
48.     }
    
49.     // Check if the input number is valid for the selected base
    
50.     const isValid = /^[0-9a-z.]+$/i.test(inputNumber.value);
    
51.     if (!isValid) {
    
52.       result.value = '输入包含无效字符';
    
53.       return;
    
54.     }
    
55.     // Separate integer and fractional parts
    
56.     const [integerPartStr, fractionalPartStr = ''] = inputNumber.value.split('.');
    
57.     // Convert integer part
    
58.     const integerPartDecimal = parseInt(integerPartStr, fromBase.value);
    
59.     if (isNaN(integerPartDecimal)) {
    
60.       result.value = '无效的输入数字';
    
61.       return;
    
62.     }
    
63.     const integerPartResult = integerPartDecimal.toString(toBase.value).toUpperCase();
    
64.     // Convert fractional part if it exists
    
65.     let fractionalPartResult = '';
    
66.     if (fractionalPartStr) {
    
67.       let decimalFraction = 0;
    
68.       for (let i = 0; i < fractionalPartStr.length; i++) {
    
69.         const digit = parseInt(fractionalPartStr[i], fromBase.value);
    
70.         if (isNaN(digit) || digit >= fromBase.value) {
    
71.           result.value = '无效的小数部分';
    
72.           return;
    
73.         }
    
74.         decimalFraction += digit * Math.pow(fromBase.value, -(i + 1));
    
75.       }
    
76.       let tempFractionalResult = '';
    
77.       let tempDecimal = decimalFraction;
    
78.       for (let i = 0; i < 10; i++) { // Limit precision to 10 digits
    
79.         tempDecimal *= toBase.value;
    
80.         const integerPart = Math.floor(tempDecimal);
    
81.         tempFractionalResult += integerPart.toString(toBase.value).toUpperCase();
    
82.         tempDecimal -= integerPart;
    
83.         if (tempDecimal === 0) {
    
84.           break;
    
85.         }
    
86.       }
    
87.       fractionalPartResult = '.' + tempFractionalResult;
    
88.     }
    
89.     result.value = integerPartResult + fractionalPartResult;
    
90.   } catch (error) {
    
91.     result.value = '转换出错';
    
92.     console.error("Conversion error:", error);
    
93.   }
    
94. }
    
95. </script>
    
96. <style scoped>
    
97. .converter-container {
    
98.   max-width: 600px;
    
99.   margin: 20px auto;
    
100.   padding: 20px;
     
101.   background: #fff;
     
102.   border-radius: 8px;
     
103.   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
     
104. }
     
105. h1 {
     
106.   text-align: center;
     
107.   color: #333;
     
108.   margin-bottom: 10px;
     
109. }
     
110. .description {
     
111.   text-align: center;
     
112.   color: #666;
     
113.   margin-bottom: 30px;
     
114. }
     
115. .converter-wrapper {
     
116.   margin: 20px 0;
     
117. }
     
118. .converter-row {
     
119.   display: flex;
     
120.   gap: 10px;
     
121.   margin-bottom: 15px;
     
122. }
     
123. .select-group, .input-group, .result-group {
     
124.   flex: 1;
     
125. }
     
126. .base-select, .number-input {
     
127.   width: 100%;
     
128.   padding: 12px;
     
129.   border: 1px solid #fff;
     
130.   border-radius: 4px;
     
131.   font-size: 16px;
     
132. }
     
133. .result-display {
     
134.   padding: 12px;
     
135.   background: #f8f9fa;
     
136.   border: 1px solid #eee;
     
137.   border-radius: 4px;
     
138.   min-height: 46px;
     
139. }
     
140. .convert-btn {
     
141.   width: 100%;
     
142.   padding: 12px;
     
143.   background: #007bff;
     
144.   color: white;
     
145.   border: none;
     
146.   border-radius: 4px;
     
147.   cursor: pointer;
     
148.   font-size: 16px;
     
149.   transition: background 0.3s;
     
150. }
     
151. .convert-btn:hover {
     
152.   background: #0056b3;
     
153. }
     
154. </style>

复制代码

到此这篇关于vue实现在线进制转换的文章就介绍到这了,更多相关vue在线进制转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/339652ddf.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！