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

<template>
	<u-input :placeholder="placeholder" :fontSize="fontSize" :modelValue="value"  
		:custom-style="`border-radius: 10rpx;padding: 11rpx 20rpx;${customStyle};`" 
		@change="handleInputChange"
	>
		<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>
	<tpx-physics-scan @onChange="handleScanChange"></tpx-physics-scan>
</template>

<script>
	import { scanCode } from "@/common/untool"
	export default {
		
		props: {
			
			value: {
				default () {
					return ''
				}
			},
			placeholder:{
				default () {
					return '请输入或扫码'
				}
			},
			fontSize: {
				default () {
					return 26
				}
			},
			iconPos: {
				default () {
					return "left"
				}
			},
			customStyle:{
				default () {
					return ''
				}
			},
			placeholderStyle:{
				default () {
					return ''
				}
			},
		},
		data() {
		},
		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)
			}
		}
	}
</script>

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