Vue

2024-07-15 04:27| 来源: 网络整理| 查看: 265

预备方案

1.使用password，直接展示 2.使用email，切换展示 3.使用password，切换展示

解决方案

一开始使用password类型，但是有一个问题一直解决不了：点击保存的时候，浏览器会弹出保存/更新密码。所以改用email类型。原理：因为扫码枪是模拟键盘的回车按键，所以输入的时候切换成email类型的输入框。输入完再赋值

template：

data:

scanVisible: false, scanValue: '', scanContractInfo: '', scanReadonly: true

script：

// 扫描合同 scanContract() { this.scanVisible = true this.scanValue = '' this.scanContractInfo = '' this.scanReadonly = false this.$nextTick(() => { this.$refs.scanValue.focus() }) }, closeScan() { this.scanValue = '' this.scanContractInfo = '' this.$nextTick(() => { this.scanVisible = false }) }, inputFocus(e) { // 获取焦点时同时去除只读，这样可以获取光标，进行输入 this.scanReadonly = false this.$nextTick(() => { this.$refs.scanValue.focus() }) }, payCode(e) { // 这里进行扫码枪扫码后的操作，调后台接口 this.scanValue = e this.scanContractInfo = '' this.scanReadonly = true }, inputBlur(e) { this.scanReadonly = false setTimeout(() => { this.$nextTick(() => { if (this.$refs.scanValue) { this.$refs.scanValue.focus() } }) }, 10) }, handleScan() { if (this.scanValue === '') { this.$message.error('请扫描合同二维码') return false } var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g") if (reg.test(this.scanValue)) { this.$message.error('请切换输入法为英文后重新扫描合同二维码') return false } decryptFile({ decryptText: this.scanValue }).then((res) => { if (res.success) { this.scanContractInfo = JSON.parse(res.data || '{}') this.$router.push({ path: `/common/contract/${this.scanContractInfo.contractId}` }) this.closeScan() } }) }

【本文地址】

公司简介

联系我们