189 lines
3.6 KiB
Vue
189 lines
3.6 KiB
Vue
<template>
|
|
<view class="rel _input _bb">
|
|
<input :style="ciystyle" style="margin-right:3em;" :type="type" :name="name" :value="txtvalue" :placeholder="placeholder" :disabled="disabled" :maxlength="maxlength" :confirm-type="confirmType" @input="textinput" @focus="textfocus" @blur="textblur" @confirm="textconfirm" :cursor-spacing="120" :class="{_left:left,_disabled:disabled}" />
|
|
<button class="btn sm def abs r0 t0 b0" style="z-index:10;line-height: 2em;" @tap="ocr">OCR</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
behaviors: ['uni://form-field-group'],
|
|
emits: ['change', 'update:modelValue', 'focus', 'blur'],
|
|
props: {
|
|
name: {
|
|
type: String
|
|
},
|
|
modelValue: {
|
|
type: [String, Number],
|
|
default: ''
|
|
},
|
|
value: {
|
|
type: [String, Number],
|
|
default: ''
|
|
},
|
|
initevent: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
type: {
|
|
type: String, //text、number、idcard、digit 微信小程序:safe-password、nickname
|
|
default: 'text'
|
|
},
|
|
ciystyle: {
|
|
type: [String, Object]
|
|
},
|
|
bb: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
left: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '66'
|
|
},
|
|
clktxt: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
maxlength: {
|
|
type: Number,
|
|
default: 140
|
|
},
|
|
confirmType: {
|
|
type: String, // send发送、search搜索、next下一个、go前往、done完成
|
|
default: 'done'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
v: '',
|
|
};
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler(newD, oldD) {
|
|
if (newD || oldD)
|
|
this.v = 'value';
|
|
},
|
|
immediate: true
|
|
},
|
|
modelValue: {
|
|
handler(newD, oldD) {
|
|
if (newD || oldD)
|
|
this.v = 'modelValue';
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
computed: {
|
|
txtvalue() {
|
|
var val = '';
|
|
if (this.v == 'modelValue') {
|
|
val = this.modelValue + '';
|
|
} else if (this.v == 'value') {
|
|
val = this.value + '';
|
|
} else {
|
|
val = this.v;
|
|
}
|
|
return val;
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.initevent) {
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'init',
|
|
value: this.txtvalue
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
textfocus(e) {
|
|
this.$emit('focus', e);
|
|
},
|
|
textblur(e) {
|
|
this.$emit('blur', e);
|
|
},
|
|
textinput(e) {
|
|
var txt = e.detail.value;
|
|
if (txt === undefined)
|
|
txt = e.data;
|
|
this.$emit('update:modelValue', txt);
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'input',
|
|
value: txt
|
|
});
|
|
},
|
|
textconfirm(e) {
|
|
var txt = e.detail.value;
|
|
if (txt === undefined)
|
|
txt = e.data;
|
|
this.$emit('update:modelValue', txt);
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'confirm',
|
|
value: txt
|
|
});
|
|
},
|
|
ocr(e) {
|
|
var app = getApp();
|
|
app.globalData.ciy_page_ocr = {
|
|
txt: this.txtvalue,
|
|
clktxt: this.clktxt ? this.clktxt.split(',') : []
|
|
};
|
|
uni.navigateTo({
|
|
url: '/pages/pub/ocrdata',
|
|
events: {
|
|
writedata: data => {
|
|
this.v = data;
|
|
this.$emit('update:modelValue', this.v);
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'ocr',
|
|
value: this.v
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
._input {
|
|
font-size: 1em;
|
|
height: 1em;
|
|
width: inherit;
|
|
padding: 0 0.5em;
|
|
}
|
|
|
|
._input._left {
|
|
text-align: left;
|
|
}
|
|
|
|
._input._disabled {
|
|
color: var(--txt1);
|
|
}
|
|
|
|
._input._bb {
|
|
background: var(--bg1);
|
|
text-align: left;
|
|
padding: 0.5em;
|
|
border-radius: 0.5em;
|
|
border: 1px solid var(--bg5);
|
|
height:2.5em;
|
|
}
|
|
</style> |