Skip to content

T
template_pda_Web
Commit 6d4827a6 authored by 张伯涛's avatar 张伯涛
Browse files
Options

扫码测试

parent 5b5a34c4
Show whitespace changes
Inline Side-by-side
Showing with 271 additions and 0 deletions
src/views/setup/testThree.vue 0 → 100644
View file @ 6d4827a6
<template>
<div class="testThree_module">
<div class="content">
<div class="button_row">
<el-button class="button_rowBtn" type="primary">扫码</el-button>
</div>
<div class="formBody">
<el-form ref="form" :model="form" :rules="rules" label-width="auto" @submit.native.prevent>
<div class="formItem_row">
<el-form-item label="扫码1" prop="scanCode" class="outbound_formItem">
<el-input
ref="inputVal"
v-model="form.scanCode"
show-word-limit
placeholder="请扫码"
@blur="SNBlur"
@focus="stopKeyborad"
@click.native="handleClick"
/>
<el-button class="blue-btn" type="primary" @click="handleReset1">重置</el-button>
</el-form-item>
</div>
<div class="formItem_row">
<el-form-item label="扫码2" prop="scanCode2" class="outbound_formItem">
<el-input
ref="inputVal2"
v-model="form.scanCode2"
show-word-limit
placeholder="请扫码"
@blur="SNBlur2"
@focus="stopKeyborad"
@click.native="handleClick"
/>
<el-button class="blue-btn" type="primary" @click="handleReset2">重置</el-button>
</el-form-item>
</div>
<el-form-item label="输入" prop="scanCode3" class="outbound_formItem">
<el-input
ref="inputVal3"
v-model="form.scanCode3"
show-word-limit
placeholder="请输入"
@blur="SNBlur3"
/>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Outbound',
data() {
return {
codeReadonly: false, // 扫码input是否可编辑（防止扫码枪短时间内扫描两个码，从而造成inpu码赋值混乱）
options: [
{ value: '1', label: '类型1' },
{ value: '2', label: '类型2' },
{ value: '3', label: '类型3' }
],
form: {
scanCode: '',
scanCode2: '',
scanCode3: ''
},
rules: {
}
}
},
created() {
},
mounted() {
this.getFocus('inputVal') // 扫码input获取focus
},
methods: {
handleReset1() {
this.form.scanCode = ''
this.$refs.inputVal.focus()
},
handleReset2() {
this.$refs.inputVal2.focus()
},
/** 扫码input的blur事件*/
SNBlur() {
setTimeout(() => {
console.log('111111111', this.$refs.inputVal2.focused)
console.log('aaaaaaaaaaaaaa', this.$refs.inputVal3.focused)
if (this.$refs.inputVal2.focused === false && this.$refs.inputVal3.focused === false) {
this.getFocus('inputVal') // 扫码input获取focus
}
}, 500)
},
SNBlur2() {
setTimeout(() => {
console.log('111111111', this.$refs.inputVal2.focused)
if (this.$refs.inputVal.focused === false && this.$refs.inputVal3.focused === false) {
this.getFocus('inputVal2') // 扫码input获取focus
}
}, 500)
},
SNBlur3() {
setTimeout(() => {
console.log('111111111', this.$refs.inputVal2.focused)
if (this.$refs.inputVal.focused === false && this.$refs.inputVal2.focused === false) {
this.getFocus('inputVal3') // 扫码input获取focus
}
}, 500)
},
/** 扫码input获取focus*/
getFocus: function(val) {
this.$nextTick(() => {
this.$refs[val].focus()
})
},
/** 焦点变只读，不弹出键盘 在改变状态*/
stopKeyborad(e) {
e.target.setAttribute('readonly', true)
setTimeout(() => {
e.target.removeAttribute('readonly')
}, 100)
},
/** 屏蔽默认键盘弹出*/
handleClick() {
document.activeElement.blur()// 屏蔽默认键盘弹出；
}
}
}
</script>
<style scoped lang="scss">
.testThree_module{
padding: 20px;
.formItem_row{
::v-deep .el-form-item__content{
display: flex!important;
align-items: center!important;
}
}
.content{
text-align: center;
}
.formBody{
display: flex;
justify-content: center;
}
.button_row{
margin: 20px 0 20px 0;
.button_rowBtn{
font-size: 17px;
width: 160px;
}
}
.outbound_formItem{
width: 500px;
::v-deep .el-input__inner{
height: 40px;
}
}
.outbound_form{
width: 300px;
}
}
</style>
src/views/setup/testTwo.vue 0 → 100644
View file @ 6d4827a6
<template>
<div class="testTwo_module">
<div class="content">
<div class="button_row">
<el-button class="button_rowBtn" type="primary" >扫码</el-button>
</div>
<div class="formBody">
<el-form ref="form" :model="form" :rules="rules" label-width="auto" label-position="top" @submit.native.prevent>
<el-form-item label="扫码结果" prop="scanCode" class="outbound_formItem">
<el-input
ref="inputVal"
v-model="form.scanCode"
show-word-limit
placeholder="请扫码"
@blur="SNBlur"
@focus="stopKeyborad"
@click.native="handleClick"
/>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Outbound',
data() {
return {
codeReadonly: false, // 扫码input是否可编辑（防止扫码枪短时间内扫描两个码，从而造成inpu码赋值混乱）
options: [
{ value: '1', label: '类型1' },
{ value: '2', label: '类型2' },
{ value: '3', label: '类型3' }
],
form: {
scanCode: ''
},
rules: {
}
}
},
created() {
},
mounted() {
this.getFocus() // 扫码input获取focus
},
methods: {
/** 扫码input的blur事件*/
SNBlur() {
setTimeout(() => {
this.getFocus() // 扫码input获取focus
}, 300)
},
/** 扫码input获取focus*/
getFocus: function() {
this.$nextTick(() => {
this.$refs.inputVal.focus()
})
},
/** 焦点变只读，不弹出键盘 在改变状态*/
stopKeyborad(e) {
e.target.setAttribute('readonly', true)
setTimeout(() => {
e.target.removeAttribute('readonly')
}, 100)
},
/** 屏蔽默认键盘弹出*/
handleClick() {
document.activeElement.blur()// 屏蔽默认键盘弹出；
},
}
}
</script>
<style scoped lang="scss">
.testTwo_module{
padding: 20px;
.content{
text-align: center;
}
.formBody{
display: flex;
justify-content: center;
}
.button_row{
margin: 20px 0 20px 0;
.button_rowBtn{
font-size: 17px;
width: 160px;
}
}
.outbound_formItem{
width: 200px;
::v-deep .el-input__inner{
height: 40px;
}
}
.outbound_form{
width: 300px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment