<template>
|
<view class="oi-form-input-number">
|
<input v-if="model" type="number" class="oi-input-number" :class="data.disabled?'input-disabled':''" v-model="model[data.fieldId]" :focus="focus"
|
:placeholder="data.placeholder" @blur="onChange" @confirm="onConfirm" @click="onClick"
|
:disabled="data.disabled"></input>
|
<input v-else type="number" class="oi-input-number" :class="data.disabled?'input-disabled':''" v-model="data.value" :focus="focus"
|
:placeholder="data.placeholder" @blur="onChange" @confirm="onConfirm" @click="onClick"
|
:disabled="data.disabled"></input>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: "OIFormInputNumber",
|
props: {
|
data: {
|
type: Object,
|
required: true,
|
},
|
model: Object,
|
focus: {
|
type: Boolean,
|
default: false
|
},
|
},
|
methods: {
|
onChange(e) {
|
this.$emit("change", e)
|
},
|
onConfirm(e) {
|
this.onChange(e)
|
},
|
onClick(e) {
|
this.$emit("click", e)
|
},
|
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.oi-form-input-number {
|
border: 1px solid #d5d5d5;
|
width: calc(100%- 6rpx);
|
border-radius: 6px !important;
|
padding: 3rpx;
|
.input-disabled {
|
background-color: #f3f3f3 !important;
|
}
|
|
.oi-input-number {
|
color: #2d8cf0;
|
padding: 10rpx 8rpx;
|
width: calc(100% - 12rpx);
|
padding: 5rpx;
|
border: 1px solid #d5d5d5;
|
color: #2d8cf0;
|
height: 20px;
|
background: #FFF;
|
line-height: 20px;
|
border-radius: 6px !important;
|
font-size: 14px;
|
font-family: inherit;
|
box-shadow: none !important;
|
transition-duration: 0.1s;
|
vertical-align: middle;
|
}
|
}
|
.oi-form-input-number:hover {
|
border: 1px solid rgb(41, 121, 255);
|
}
|
</style>
|
