feat:scScanner支持扫码枪(蓝牙/USB)输入,套壳环境保留原生扫码按钮
增强公共扫码组件:常驻扫码枪输入框(HID键盘,聚焦后扫码回车触发), 检测到window.Android时额外显示原生扫码按钮;统一emit scanResult事件, 28个引用页面向后兼容。含中文输入法检测提示。平板蓝牙枪、PC USB枪均可用。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
61c04fe150
commit
ac93b8e73b
|
|
@ -1,37 +1,63 @@
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<span class="sc-scanner" style="display:inline-flex;align-items:center;gap:4px;vertical-align:middle;">
|
||||||
<el-button type="primary" @click="scanCode" style="margin-left:4px">{{labeltext}}</el-button>
|
<!-- 扫码枪(蓝牙/USB HID):聚焦后扫码即输入,回车触发。平板蓝牙枪、PC USB枪都走这里 -->
|
||||||
</div>
|
<el-input
|
||||||
|
ref="gunInput"
|
||||||
|
v-model="gunValue"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
clearable
|
||||||
|
:style="{ width: gunWidth }"
|
||||||
|
@keydown.enter.prevent="onGunScan"
|
||||||
|
/>
|
||||||
|
<!-- 套壳App原生扫码(摄像头/激光):仅在检测到 window.Android 时显示,保留 gx 现有能力 -->
|
||||||
|
<el-button v-if="hasAndroid" type="primary" @click="scanCode">{{ labeltext }}</el-button>
|
||||||
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
labeltext: {
|
labeltext: { type: String, default: "扫码" },
|
||||||
type: String,
|
placeholder: { type: String, default: "扫码枪扫描" },
|
||||||
default: "扫码",
|
gunWidth: { type: String, default: "180px" },
|
||||||
}
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
scannedResult: null, // 存储扫描到的二维码数据
|
scannedResult: null, // 存储扫描到的二维码数据
|
||||||
|
gunValue: "", // 扫码枪输入缓冲
|
||||||
|
hasAndroid: !!window.Android, // 是否套壳App环境(有原生扫码)
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
window.onScanResult = this.onScanResult;
|
window.onScanResult = this.onScanResult;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 套壳App原生扫码(摄像头/激光)
|
||||||
scanCode() {
|
scanCode() {
|
||||||
if (window.Android) {
|
if (window.Android) {
|
||||||
window.Android.openScanner();
|
window.Android.openScanner();
|
||||||
} else {
|
} else {
|
||||||
alert("当前环境不支持扫码");
|
alert("当前环境不支持原生扫码");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 扫码枪(键盘输入)扫描完成:枪扫完通常自动回车
|
||||||
|
onGunScan() {
|
||||||
|
let v = (this.gunValue || "").trim();
|
||||||
|
this.gunValue = "";
|
||||||
|
if (!v) return;
|
||||||
|
if (/[一-龥]/.test(v)) {
|
||||||
|
this.$message
|
||||||
|
? this.$message.error("扫码内容含中文,请切换英文输入法后重试")
|
||||||
|
: alert("扫码内容含中文,请切换英文输入法后重试");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$emit("scanResult", v);
|
||||||
|
},
|
||||||
|
// 原生扫码回调(window.onScanResult)
|
||||||
onScanResult(data) {
|
onScanResult(data) {
|
||||||
this.scannedResult = data;
|
this.scannedResult = data;
|
||||||
this.$emit('scanResult', data);
|
this.$emit("scanResult", data);
|
||||||
return data;
|
return data;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue