WZC2/fe/PDA/mycomponents/wincom/winComScan.vue

<!--扫描组件-->
<template>
	<page-meta root-font-size="18px"></page-meta>
	<view>
		<view class="conbox" >
			<textarea  v-model="scanMsg" trim="all" maxlength="1000" style="margin-left: 5px;width: 100%;" :focus="boxfocus"
				:placeholder="placeholderValue" :auto-focus='true' @keydown.enter="handelScanMsg" @focus="getfocus"
				@blur="losefocus"></textarea>
			<!-- <input v-model="scanMsg" type="search" @keydown.enter="doSearch" style="{height:100px}"/> -->
			<!-- <uni-easyinput ref='scanInput' :inputBorder="true" :focus="boxfocus" v-model="scanMsg" trim="all"
				@keydown.enter="doSearch" type="textarea" @focus="getfocus" @blur="blurfocus" @iconClick="iconclick"
				@confirm="confirm" placeholderStyle="font-size:16px"
				style='font-size: 18px;'>
			</uni-easyinput> -->
			<!-- :class="`myinput ${boxfocus == true ?'inputfocus':''}`" -->
			<!-- <uni-easyinput 	
					 ef='scanInput' :inputBorder="false" :focus="boxfocus" v-model="scanMsg" trim="all"
						@keydown.enter="handelScanMsg"  @focus="getfocus" @blur="blurfocus" @iconClick="iconclick"
						@confirm="confirm" placeholderStyle="font-size:16px" :placeholder="placeholderValue" 
						maxlength='1000'
						style='font-size: 18px; height: 300px; background-color: aqua;'>
					</uni-easyinput> -->
		</view>
	</view>
</template>
<script module="input" lang="renderjs">
	import {
		analyseScanInfo
	} from '@/common/scan.js';
	export default {
		name: "winComScan",
		props: {
			placeholder: {
				type: String,
				default: '请扫描标签'
			},
			clearResult: {
				type: Boolean,
				default: true
			},
			boxFocus: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				scanMsg: "",
				items: null,
				boxfocus: this.boxFocus,
				placeholderValue: ''
			}
		},
		mounted() {
			if (this.$el.querySelector('textarea') != null) {
				this.$el.querySelector('textarea').setAttribute('inputmode', 'none')
			}
		},
		watch: {
			placeholder() {
				this.placeholderValue = '请扫描' + this.placeholder;
			}
		},
		created() {
			this.placeholderValue = '请扫描' + this.placeholder;
		},
		methods: {
			setValue(val) {
				this.scanMsg = val
			},
			clearScanValue() {
				this.scanMsg = ''
			},
			iconclick(type) {
				console.log(type)
			},
			confirm() {
				this.handelScanMsg();
			},
			handelScanMsg() {
				let that = this;
				if (that.scanMsg == "")
					return;
				setTimeout(() => {
					//去除回车和空格
					let content = that.scanMsg.replace(/[\r\n]/g, "").replace(/[, ]/g, "");
					let scanResult = analyseScanInfo(content);
					if (scanResult.sucess) {
						if (that.clearResult) {
							that.clear();
						}
						that.$emit("getScanResult", scanResult);
					} else {
						uni.showToast({
							title: scanResult.message,
							icon: 'error',
							duration: 2000
						})
					}
				});
			},
			getfocus() {
				let that = this;
				that.boxfocus = true;
				this.$nextTick(r => {
					that.boxfocus = true;
				});
			},
			losefocus() {
				let that = this;
				that.boxfocus = false;
				this.$nextTick(r => {
					that.boxfocus = false;
				});
			},
			blurfocus() {
				this.boxfocus = false;
			},
			clear() {
				let that = this;
				that.clearScanValue();
				// this.$refs.scanInput.onClear(); //删除input的内容
				that.boxfocus = true;
			},
			iconClick(type) {
				this.$emit("clearResult", this.scanMsgk);
			},
			getValue() {
				return this.scanMsg
			}
		}
	}
</script>
<!-- <script module="input" lang="renderjs">
	export default {
		mounted() {
			if (this.$el.querySelector('textarea') != null) {
				this.$el.querySelector('textarea').setAttribute('inputmode', 'none')
			}

		}
	}
</script> -->
<style scoped lang="scss">

</style>