150 lines
2.9 KiB
Vue
150 lines
2.9 KiB
Vue
<template>
|
|
<input class="_input" :style="ciystyle" :type="type" :name="name" :value="txtvalue" :password="password" :placeholder="placeholder" :disabled="disabled" :maxlength="maxlength" :confirm-type="confirmType" @input="textinput" @focus="textfocus" @blur="textblur" @confirm="textconfirm" :cursor-spacing="120" :class="{_bb:bb,_left:left,_disabled:disabled}" />
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
options: {
|
|
virtualHost: true
|
|
},
|
|
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]
|
|
},
|
|
password: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
bb: { //传统文本框效果
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
left: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
maxlength: {
|
|
type: Number,
|
|
default: 180
|
|
},
|
|
confirmType: {
|
|
type: String, // send发送、search搜索、next下一个、go前往、done完成
|
|
default: 'done'
|
|
}
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
watch: {},
|
|
computed: {
|
|
txtvalue() {
|
|
if (typeof(this.modelValue) == 'number')
|
|
return this.modelValue;
|
|
if (typeof(this.value) == 'number')
|
|
return this.value;
|
|
if (this.modelValue)
|
|
return this.modelValue;
|
|
if (this.value)
|
|
return this.value;
|
|
return '';
|
|
}
|
|
},
|
|
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
|
|
});
|
|
}
|
|
|
|
}
|
|
}
|
|
</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._disabled {
|
|
background: var(--bg4);
|
|
}
|
|
|
|
._input._bb {
|
|
background: var(--bg1);
|
|
text-align: left;
|
|
padding: 0.5em;
|
|
border-radius: 0.5em;
|
|
border: 1px solid var(--bg5);
|
|
}
|
|
</style> |