| | |
| | | @paste="paste" |
| | | @mousewheel="mousewheel" |
| | | @input="inputEvent" |
| | | @compositionend="compositionend" |
| | | v-for="(item, index) in codeList" |
| | | > |
| | | <input |
| | |
| | | style=" |
| | | height: 100%; |
| | | display: inline-block; |
| | | line-height: 24px; |
| | | width: 24px; |
| | | line-height: 22px; |
| | | width: 22px; |
| | | text-align: center; |
| | | " |
| | | class="el-icon-minus" |
| | |
| | | // }, |
| | | }, |
| | | methods: { |
| | | compositionend(e){ |
| | | e.preventDefault() |
| | | this.batchInsert(e.data,e.target) |
| | | }, |
| | | // 解决一个输入框输入多个字符 |
| | | inputEvent(e) { |
| | | var index = e.target.dataset.index * 1; |
| | |
| | | } |
| | | }, |
| | | 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); |
| | |
| | | } |
| | | }, |
| | | mousewheel(e) { |
| | | // 防止触发外部滚动条 |
| | | e.preventDefault() |
| | | var index = e.target.dataset.index; |
| | | if (e.wheelDelta > 0) { |
| | | if (this.input[index] * 1 < 9) { |
| | |
| | | } |
| | | } |
| | | }, |
| | | /** |
| | | * 批量添加字符 |
| | | * @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() { |
| | |
| | | // 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; |