190 lines
3.8 KiB
Vue
190 lines
3.8 KiB
Vue
<template>
|
|
<view class="_input" :class="{_bb:bb,_left:left,_disabled:disabled}">
|
|
<input type="hidden" :name="name" :value="tvalue" style="display:none;" />
|
|
<input v-if="hasmore" type="hidden" :name="name+'_unit'" :value="unit" style="display:none;" />
|
|
<input type="digit" :name="hasmore?name+'_num':''" :class="{_disabled:disabled}" :value="txvalue" :placeholder="placeholder" :confirm-type="confirmType" @input="textinput" @focus="textfocus" @blur="textblur" @confirm="textconfirm" :cursor-spacing="120" :disabled="disabled" :style="ciystyle" />
|
|
<view class="_unit" :class="{_disabled:disabled}">{{unit}}</view>
|
|
</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: ''
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
initevent: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hasmore: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
bb: { //传统文本框效果
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
left: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
ciystyle: {
|
|
type: [String, Object],
|
|
default: {
|
|
width: '4em'
|
|
}
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
bet: {
|
|
type: [String, Number],
|
|
default: 1
|
|
},
|
|
unit: {
|
|
type: [String],
|
|
default: ""
|
|
},
|
|
confirmType: {
|
|
type: String, // send发送、search搜索、next下一个、go前往、done完成
|
|
default: 'done'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tvalue: 0
|
|
};
|
|
},
|
|
watch: {},
|
|
computed: {
|
|
txvalue() {
|
|
var v = 0;
|
|
if (this.modelValue)
|
|
v = this.toint(this.modelValue);
|
|
if (this.value)
|
|
v = this.toint(this.value);
|
|
this.tvalue = v;
|
|
return this.tofix(v / this.mybet, -4);
|
|
},
|
|
mybet() {
|
|
var bet = this.toint(this.bet);
|
|
if (bet < 1)
|
|
bet = 1;
|
|
return bet;
|
|
},
|
|
},
|
|
mounted() {
|
|
this.tvalue = this.txvalue * this.mybet;
|
|
if (this.initevent) {
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'init',
|
|
value: this.tvalue
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
textfocus(e) {
|
|
this.$emit('focus', e);
|
|
},
|
|
textblur(e) {
|
|
this.$emit('blur', e);
|
|
var txt = e.detail.value;
|
|
if (txt === undefined)
|
|
txt = e.data;
|
|
txt = this.toint(this.tofloat(txt) * this.mybet);
|
|
this.tvalue = txt;
|
|
this.$emit('update:modelValue', txt);
|
|
},
|
|
textinput(e) {
|
|
var txt = e.detail.value;
|
|
if (txt === undefined)
|
|
txt = e.data;
|
|
txt = this.toint(this.tofloat(txt) * this.mybet);
|
|
this.tvalue = txt;
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'input',
|
|
value: txt
|
|
});
|
|
},
|
|
textconfirm(e) {
|
|
var txt = e.detail.value;
|
|
if (txt === undefined)
|
|
txt = e.data;
|
|
txt = this.toint(this.tofloat(txt) * this.mybet);
|
|
this.tvalue = txt;
|
|
this.$emit('update:modelValue', txt);
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'confirm',
|
|
value: txt
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
._input {
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
._input._left {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
._input input {
|
|
font-size: 1em;
|
|
height: 1em;
|
|
text-align: right;
|
|
}
|
|
|
|
._input._bb {
|
|
gap: 0;
|
|
}
|
|
|
|
._input._bb input {
|
|
background: var(--bg1);
|
|
padding: 0.5em;
|
|
border-radius: 0.5em 0 0 0.5em;
|
|
border: 1px solid var(--bg5);
|
|
}
|
|
|
|
._input._bb ._unit {
|
|
background: var(--bg1);
|
|
padding: 0.5em;
|
|
height: 2.5em;
|
|
border-radius: 0 0.5em 0.5em 0;
|
|
border: 1px solid var(--bg5);
|
|
}
|
|
|
|
._input._bb ._disabled {
|
|
background: var(--bg3);
|
|
color: var(--txt1);
|
|
}
|
|
|
|
._input ._disabled {
|
|
color: var(--bg7);
|
|
}
|
|
</style> |