vue.js3: 数字的进制转换(vue@3.2.37)
一，js代码：
<template> <div> <!--输入--> <div style="display: flex;flex-direction: column;"> <div style="margin-left: 20px;width:500px;"> <div style="width:350px;float: left;display: flex;flex-direction: row;font-size: 14px;"> <label class="radio"><input type="radio" name='input_' id="inputNum2" value="2" v-model="inputNum" @click="inputSel(2)" />2进制</label> <label class="radio"><input type="radio" name='input_' id="inputNum8" value="8" v-model="inputNum" @click="inputSel(8)" />8进制</label> <label class="radio"><input type="radio" name='input_' id="inputNum10" value="10" v-model="inputNum"
@click="inputSel(10)" checked="checked"/>10进制</label> <label class="radio"><input type="radio" name='input_' id="inputNum16" value="16" v-model="inputNum" @click="inputSel(16)" />16进制</label> </div> <div style="width:150px;float: right;"> <select id="inputNum" class="input-small" style="float:right;" v-model="inputNum" @change="inputNumChange"> <option value="2">2进制</option> <option value="3">3进制</option> <option value="4">4进制</option> <option value="5">5进制</option> <option value="6">6进制</option> <option value="7">7进制</option> <option value="8">8进制</option> <option value="9">9进制</option> <option value="10" selected>10进制</option> <option value="11">11进制</option> <option value="12">12进制</option> <option value="13">13进制</option> <option value="14">14进制</option> <option value="15">15进制</option> <option value="16">16进制</option> <option value="17">17进制</option> <option value="18">18进制</option> <option value="19">19进制</option> <option value="20">20进制</option> <option value="21">21进制</option> <option value="22">22进制</option> <option value="23">23进制</option> <option value="24">24进制</option> <option value="25">25进制</option> <option value="26">26进制</option> <option value="27">27进制</option> <option value="28">28进制</option> <option value="29">29进制</option> <option value="30">30进制</option> <option value="31">31进制</option> <option value="32">32进制</option> <option value="33">33进制</option> <option value="34">34进制</option> <option value="35">35进制</option> <option value="36">36进制</option> </select> </div> </div> <el-input v-model="inputValue" placeholder="请输入待转换的数字" @input="setInputNum" style="margin-left:20px;margin-top:5px;width:500px;"> <template #prepend><span style="width:84px;">待转换数字</span></template> <template #suffix><i class="el-icon-user el-input__icon"></i></template> </el-input> </div> <!--输出--> <div style="display: flex;flex-direction: column;margin-top:25px;"> <div style="margin-left: 20px;width:500px;"> <div style="width:350px;float: left;display: flex;flex-direction: row;font-size: 14px;"> <label class="radio"><input type="radio" name='output_' value="2" v-model="outputNum" @click="outputSel(2)" />2进制</label> <label class="radio"><input type="radio" name='output_' value="8" v-model="outputNum" @click="outputSel(8)" />8进制</label> <label class="radio"><input type="radio" name='output_' value="10" v-model="outputNum"
@click="outputSel(10)" checked="checked"/>10进制</label> <label class="radio"><input type="radio" name='output_' value="16" v-model="outputNum" @click="outputSel(16)" />16进制</label> </div> <div style="width:150px;float: right;"> <select id="outputNum" v-model="outputNum" class="input-small" style="float:right;" @change="outputNumChange"> <option value="2">2进制</option> <option value="3">3进制</option> <option value="4">4进制</option> <option value="5">5进制</option> <option value="6">6进制</option> <option value="7">7进制</option> <option value="8">8进制</option> <option value="9">9进制</option> <option value="10" selected>10进制</option> <option value="11">11进制</option> <option value="12">12进制</option> <option value="13">13进制</option> <option value="14">14进制</option> <option value="15">15进制</option> <option value="16">16进制</option> <option value="17">17进制</option> <option value="18">18进制</option> <option value="19">19进制</option> <option value="20">20进制</option> <option value="21">21进制</option> <option value="22">22进制</option> <option value="23">23进制</option> <option value="24">24进制</option> <option value="25">25进制</option> <option value="26">26进制</option> <option value="27">27进制</option> <option value="28">28进制</option> <option value="29">29进制</option> <option value="30">30进制</option> <option value="31">31进制</option> <option value="32">32进制</option> <option value="33">33进制</option> <option value="34">34进制</option> <option value="35">35进制</option> <option value="36">36进制</option> </select> </div> </div> <el-input v-model="outputValue" placeholder="转换完成的数字" style="margin-left:20px;margin-top:5px;width:500px;"> <template #prepend><span >转换结果数字</span></template> <template #append> <el-icon class="copyColor" @click="copy" style="vertical-align: middle;"> <CopyDocument /> </el-icon> </template> </el-input> </div> </div> </template> <script> import Clipboard from 'clipboard' import {ref} from "vue" import {ElMessage} from "element-plus"; export default { name: "NumberComp", setup() { //解析浮点数 const pxparseFloat = (x,y) => { x=x.toString(); var num=x; var data=num.split("."); var you=data[1].split(""); //将右边转换为数组 得到类似 [1,0,1] var sum=0; //小数部分的和 for(var i=0;i<data[1].length;i++){ sum+=you[i]*Math.pow(y,-1*(i+1)) } return parseInt(data[0],y)+sum; } //得到正则匹配的表达式 const zzRegExp = (x) => { var str; console.log("x:"+x); x=parseInt(x); console.log("x:"+x); if(x<=10){ str=new RegExp("^[+\\-]?[0-"+(x-1)+"]*[.]?[0-"+(x-1)+"]*$","gi"); console.log("str:"+str); }else{ var letter=""; switch(x){ case 11:letter="a";break; case 12:letter="b";break; case 13:letter="c";break; case 14:letter="d";break; case 15:letter="e";break; case 16:letter="f";break; case 17:letter="g";break; case 18:letter="h";break; case 19:letter="i";break; case 20:letter="j";break; case 21:letter="k";break; case 22:letter="l";break; case 23:letter="m";break; case 24:letter="n";break; case 25:letter="o";break; case 26:letter="p";break; case 27:letter="q";break; case 28:letter="r";break; case 29:letter="s";break; case 30:letter="t";break; case 31:letter="u";break; case 32:letter="v";break; case 33:letter="w";break; case 34:letter="x";break; case 35:letter="y";break; case 36:letter="z";break; } str=new RegExp("^[+\\-]?[0-9a-"+letter+"]*[.]?[0-9a-"+letter+"]*$","gi"); } return str; } //输入的进制数 const inputNum = ref(10); //输入的数字值 const inputValue = ref(""); //输出的进制数 const outputNum = ref(10); //输出的进制值 const outputValue = ref(""); //输入时进行转换 const setInputNum = () => { //只允许输入对应的进制的数字 let final = ""; for (let i = 0; i < inputValue.value.length; i++) { let char = inputValue.value[i]; let px0=char.match(zzRegExp(inputNum.value)); console.log(char); if (px0 == null) { continue; } else { final = final + px0; } } console.log("final:"+final); inputValue.value = final; //转为相应的进制显示 if (final != "") { let px1 = 0; if(final.indexOf(".")==-1){ px1=parseInt(final,inputNum.value); }else{ px1=pxparseFloat(final,inputNum.value); } px1=px1.toString(outputNum.value); //console.log('px1:'+px1); outputValue.value = px1; } else { outputValue.value = ""; } } //选中输入的进制 const inputSel = (num) => { inputNum.value = num; inputValue.value = ""; outputValue.value = ""; } //选中输出的进制 const outputSel = (num) => { outputNum.value = num; setInputNum(); } //输入select发生改变时 const inputNumChange = () => { inputValue.value = ""; outputValue.value = ""; } //输出select发生改变时 const outputNumChange = () => { setInputNum(); } //复制颜色值到剪贴板 const copy = () => { let clipboard = new Clipboard('.copyColor', { text: function () { return outputValue.value; } }) clipboard.on('success', () => { ElMessage.success('复制成功'); //释放内存 clipboard.destroy() }) clipboard.on('error', () => { ElMessage.error('复制失败'); //释放内存 clipboard.destroy() }) } return { inputNum, inputValue, setInputNum, outputNum, outputValue, inputSel, outputSel, inputNumChange, outputNumChange, copy, } } } </script> <style scoped> </style>
说明：刘宏缔的架构森林是一个专注架构的博客，
网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/02/vue-js3-shu-zi-de-jin-zhi-zhuan-huan-vue-3-2-37/
对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: 371125307@qq.com
二，测试效果
三，查看vue框架的版本:
liuhongdi@lhdpc:/data/vue/child$ npm list vue child@0.1.0 /data/vue/child ├─┬ @vue/cli-plugin-babel@5.0.6 │ └─┬ @vue/babel-preset-app@5.0.6 │ └── vue@3.2.37 deduped └─┬ vue@3.2.37 └─┬ @vue/server-renderer@3.2.37 └── vue@3.2.37 deduped
