将键盘上数字与对应的符号互换

最新推荐文章于 2024-07-20 16:46:53 发布

Simple_MaxR

最新推荐文章于 2024-07-20 16:46:53 发布

阅读量747

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_55773196/article/details/126276027

版权

今天下午闲来无事，写了一个小工具。可以把键盘数字键对应的符号与数字互相转换。项目使用 Vue + Vite 构建

具体代码如下：

<template>
  <div class="container">
    <div id="decodeTitle">Decoder</div>
    <input type="text" v-model="pwInput" class="inputBox" autofocus="autofocus" placeholder="请输入需要解码的内容">
    <div class="decodedShow">{{decodedNumber}}</div>
  </div>
</template>

<script>
export default {
  name: "Decoder",
  data(){
    return{
      pwInput: '',
      codeTable:{
        ')':0,
        '!':1,
        '@':2,
        '#':3,
        '$':4,
        '%':5,
        '^':6,
        '&':7,
        '*':8,
        '(':9
      },
      decodedNumber: ''
    }
  },
  methods:{
    ToCDB(str) {
      var tmp = "";
      for(var i=0;i<str.length;i++){
        if (str.charCodeAt(i) == 12288){
          tmp += String.fromCharCode(str.charCodeAt(i)-12256);
          continue;
        }
        if(str.charCodeAt(i) > 65280 && str.charCodeAt(i) < 65375){
          tmp += String.fromCharCode(str.charCodeAt(i)-65248);
        }
        else{
          tmp += String.fromCharCode(str.charCodeAt(i));
        }
      }
      return tmp
    },
  },
  watch:{
    pwInput:{
      deep: true,
      handler(newValue,_){
        let temp = ''
        this.ToCDB(newValue).split('').forEach(pw => {
          // 符号才根据 codeTable 转换，数字不处理
          if (!(pw < 11)){
            temp += this.codeTable[pw]
          }else{
            temp += pw
          }
        })
        this.decodedNumber = temp
      }
    }
  },
}