feat: 增加xtScanInput组件

src/components/xtScanInput/index.vue

@@ -0,0 +1,52 @@
+<template>
+    <el-input ref="scanInput" v-model="scanValue" :placeholder="props.placeholder" @keydown="handleKeyDown" :type="inputType"
+        @focus="handleFocus" clearable />
+</template>
+<script setup>
+import { ref, defineProps, defineEmits, computed, onMounted } from "vue";
+import { ElMessage } from 'element-plus'
+
+const scanValue = ref('')
+const scanInput = ref(null)
+
+const props = defineProps({
+    clearAfterScan: {
+        type: Boolean,
+        default: true
+    },
+    placeholder: {
+        type: String,
+        default: '请扫描条码/二维码'
+    }
+})
+
+const emit = defineEmits(['scan']);
+const inputType = ref('text')
+
+function handleKeyDown(e) {
+    if (e.key === 'Enter') {
+        const value = scanValue.value.trim()
+        if (/[\u4e00-\u9fa5]/.test(value)) {
+            ElMessage.error('扫码内容包含中文或输入法异常，请切换为英文输入法后重试！')
+            scanValue.value = ''
+            return
+        }
+        if (value) {
+            // inputType.value = 'text'
+            //   props.onScan && props.onScan(value)
+            emit('scan', value)
+            if (props.clearAfterScan) {
+                scanValue.value = ''
+            }
+        }
+    }
+}
+
+function handleFocus(e) {
+    // 尽量提示和引导用户切换输入法为英文
+    e.target.setAttribute('inputmode', 'text')
+    e.target.setAttribute('lang', 'en')
+    // ElMessage.info('请确保输入法为英文！')
+    // inputType.value = 'password'
+}
+</script>

src/views/home/testx.vue

@@ -118,6 +118,9 @@
 					<el-table-column label="名称" prop="name"></el-table-column>
 				</scTableSelect>
 			</div>
+			<div v-if="currentM == 'xtScanInput'">
+				<xtScanInput @scan="scanOk"></xtScanInput>
+			</div>
 		</el-main>
 	</el-container>
 </template>
@@ -138,6 +141,7 @@ export default {
 				"ehsEpSelect",
 				"ehsTableSelect",
 				"scTableSelect",
+				"xtScanInput"
 			],
 			props: {
 				label: "name",
@@ -222,6 +226,9 @@ export default {
 		window.onScanResult = this.onScanResult;
 	},
 	methods: {
+		scanOk(data) {
+			console.log(data);
+		},
 		getMember(data) {
 			console.log(data);
 		},

src/xtui.js

@@ -3,6 +3,7 @@ import ehsEpSelect from './components/ehsSelect/epselect'
 import ehsSelect from './components/ehsSelect/select'
 import ehsTableSelect from './components/ehsSelect/tableSelect'
 import xtSelect from './components/xtSelect/index.vue'
+import xtScanInput from './components/xtScanInput/index.vue'
 export default {
 	install(app) {
 		app.component('ehsUserSelect', ehsUserSelect);
@@ -10,5 +11,6 @@ export default {
 		app.component('ehsSelect', ehsSelect);
 		app.component('ehsTableSelect', ehsTableSelect);
 		app.component('xtSelect', xtSelect);
+		app.component('xtScanInput', xtScanInput);
 	}
 }