feat: 增加xtScanInput组件2

src/components/xtScanInput/index.vue

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