编码的方法

haoxuan

2023-10-17 cda743ccc72a379a962a703bb049fa7bd12f3f0b

 src/components/wordInput.vue

@@ -9,6 +9,7 @@
      @paste="paste"
      @mousewheel="mousewheel"
      @input="inputEvent"
      @compositionend="compositionend"
      v-for="(item, index) in codeList"
    >
      <input
@@ -25,8 +26,8 @@
        style="
          height: 100%;
          display: inline-block;
          line-height: 24px;
          width: 24px;
          line-height: 22px;
          width: 22px;
          text-align: center;
        "
        class="el-icon-minus"
@@ -94,6 +95,10 @@
    // },
  },
  methods: {
    compositionend(e){
      e.preventDefault()
      this.batchInsert(e.data,e.target)
    },
    // 解决一个输入框输入多个字符
    inputEvent(e) {
      var index = e.target.dataset.index * 1;
@@ -147,6 +152,14 @@
      }
    },
    keyup(e) {
      if (e.ctrlKey || e.shiftKey){
        // 忽略组合键时的字符输入
        return;
      }
      if (e.isComposing || e.keyCode === 229) {
        // 忽略输入法合成事件 忽略IME加工过的值
        return;
      }
      var index = e.target.dataset.index * 1;
      var el = e.target;
      // console.log(this.input);
@@ -175,6 +188,8 @@
      }
    },
    mousewheel(e) {
      // 防止触发外部滚动条
      e.preventDefault()
      var index = e.target.dataset.index;
      if (e.wheelDelta > 0) {
        if (this.input[index] * 1 < 9) {
@@ -191,14 +206,34 @@
        }
      }
    },
    /**
     * 批量添加字符
     * @param str 字符串
     * @param currentInputElement 当前输入的input元素
     */
    batchInsert(str,currentInputElement){
      const charList = str.split('');

      let currentIndex = currentInputElement.dataset.index * 1;

      let activeInputElement =currentInputElement
      charList.forEach((ele,idx)=>{
        this.$set(this.input, currentIndex+idx, ele);
        activeInputElement = activeInputElement?.nextElementSibling
      })
      activeInputElement?.focus()
    },
    paste(e) {
      // 当进行粘贴时
      e.clipboardData.items[0].getAsString((str) => {
        if (str.toString().length === 6) {
          this.pasteResult = str.split("");
          document.activeElement.blur();
          this.$emit("complete", this.input);
        }
        // if (str.toString().length === 6) {
        //   this.pasteResult = str.split("");
        //   document.activeElement.blur();
        //   this.$emit("complete", this.input);
        // }

        this.batchInsert(str,e.target)
        this.$emit("complete", this.input);
      });
    },
    save() {
@@ -277,14 +312,15 @@
    // justify-content: space-between;
    display: inline-block;
    margin-right: 0px;
    line-height:28px;
    input {
      color: inherit;
      font-family: inherit;
      border: 0;
      outline: 0;
      border-bottom: 1px solid #919191;
      height: 24px;
      width: 24px;
      height: 22px;
      width: 22px;
      font-size:18px;
      text-align: center;
      border: #919191 1px solid;