63 lines
1.1 KiB
Vue
63 lines
1.1 KiB
Vue
<template>
|
|
<view class="sacn-box">
|
|
<!-- inputmode="none" -->
|
|
<input class="uni-input scan-border" v-model="scanValue" :maxlength="-1" :focus="focus" placeholder="请扫码" @input="onKeyInput" @confirm="inputConfirm" />
|
|
<!-- <uni-icons type="scan" size="32" color="#b9b9b9" @click="getFocus"></uni-icons> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'scan-input',
|
|
data() {
|
|
return {
|
|
focus: true,
|
|
scanValue: ''
|
|
};
|
|
},
|
|
methods: {
|
|
onKeyInput: function (event) {
|
|
this.scanValue = event.target.value;
|
|
},
|
|
emitValue() {
|
|
this.$nextTick(() => {
|
|
this.$emit('scanConfirm', this.scanValue);
|
|
setTimeout(() => {
|
|
this.scanValue = '';
|
|
}, 500);
|
|
this.getFocus();
|
|
});
|
|
},
|
|
inputConfirm() {
|
|
this.emitValue();
|
|
},
|
|
// 重置焦点
|
|
getFocus() {
|
|
// 重置焦点
|
|
this.focus = false;
|
|
setTimeout(() => {
|
|
this.focus = true;
|
|
}, 200);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.sacn-box {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-item: center;
|
|
justify-content: center;
|
|
}
|
|
.uni-input {
|
|
width: 100%;
|
|
font-size: 24px;
|
|
}
|
|
.scan-border {
|
|
border-radis: 10%;
|
|
border: 1px solid #b9b9b9;
|
|
}
|
|
</style>
|