128 lines
2.5 KiB
Vue
128 lines
2.5 KiB
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> |