emis-sapp/components/tpx-scan-input/tpx-scan-input.vue

<template>
	<u-row>
		<u-input :placeholder="placeholder" :fontSize="fontSize" :modelValue="value"
			:custom-style="`border-radius: 10rpx;padding: 11rpx 20rpx;${customStyle};`" 
			@change="handleInputChange" @blur="handleInputBlur" @focus="handleInputFocus"
		>
			<template v-if="iconPos == 'left'" v-slot:prefix>
				<u-icon @click="handleScan" name="scan" :size="fontSize*1.5"></u-icon>
			</template>
			
			<template v-if="iconPos == 'right'" v-slot:suffix>
				<u-icon @click="handleScan" name="scan" :size="fontSize*1.5"></u-icon>
			</template>
		</u-input>
		
		<view v-if="showConfirm" @click="handleConfirm" class="ml-10">
			<u-button custom-style="height: 70rpx;" :plain="true">确认</u-button>
		</view>
	</u-row>
	<tpx-physics-scan v-if="showPhysics" @onChange="handleScanChange"></tpx-physics-scan>
</template>

<script>
	import { scanCode } from "@/common/untool"
	export default {
		computed: {
			showPhysics() {
			    let bl = false
				if(this.phyTrigger == 'loaded') {
					bl = true
				}
				if(this.phyTrigger == 'focus' && this.isInputFocused) {
					bl = true
				}
			    return bl
			},
		},
		props: {
			
			value: {
				default () {
					return ''
				}
			},
			placeholder:{
				default () {
					return '请输入或扫码'
				}
			},
			fontSize: {
				default () {
					return 26
				}
			},
			iconPos: {
				default () {
					return "left"
				}
			},
			customStyle:{
				default () {
					return ''
				}
			},
			placeholderStyle:{
				default () {
					return ''
				}
			},
			showConfirm:{
				default () {
					return false
				}
			},
			phyTrigger:{ // 红外监听方式
				default () {
					return 'loaded' // loaded:组件加载 focus：输入框获取焦点
				}
			},
		},
		data() {
			return {
				isInputFocused: false
			}
		},
		created() {

		},
		onHide() {

		},
		unmounted() {},
		
		methods: {
			async handleScan() {
				const res = await scanCode()
				this.handleScanChange(res)
			},
			handleChange(val){
				this.$emit('change', val)
				this.$emit('update:value', val)
			},
			handleInputChange(val){
				this.$emit('inputChange', val)
				this.handleChange(val)
			},
			handleScanChange(val){
				this.$emit('scanChange', val)
				this.handleChange(val)
			},
			handleConfirm(){
				this.$emit('confirmClick')
			},
			handleInputBlur(){
				this.isInputFocused = false
				this.$emit('blur')
			},
			handleInputFocus(){
				this.isInputFocused = true
				this.$emit('focus')
			}
		}
	}
</script>

<style scoped lang="scss">
	
</style>