drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

InputNumber add prop controls-outside

Browse source
This commit is contained in:
梁灏 2021-01-15 15:42:38 +08:00
parent b8f4f2a4a3
commit 27adf364c0
3 changed files with 105 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
examples/routers/input-number.vue
View file

@ -43,17 +43,17 @@
<div>
<!-- <InputNumber :max="1000000000" :min="1" v-model="value1" :formatter="formatter" :parser="parser" @on-change="change" style="width: 200px"></InputNumber>
<InputNumber :max="1000000000" :min="1" v-model="value2" :formatter="formatter2" :parser="parser2" @on-change="change" style="width: 200px"></InputNumber>
<InputNumber @on-change="change" style="width: 200px"></InputNumber>
<InputNumber v-model="valueNull" @on-change="change" style="width: 200px"></InputNumber>
<InputNumber v-model="valueNull" @on-change="change" :formatter="formatter" :parser="parser" style="width: 200px"></InputNumber>
<InputNumber v-model="value2" @on-focus="focus" style="width: 200px"></InputNumber>
<InputNumber v-model="value3" style="width: 200px" placeholder="Enter something..."></InputNumber> -->
<InputNumber v-model="valueNull" style="width: 200px" :min='1' :max='10000' :precision='2' ></InputNumber>
<InputNumber v-model="valueNull" style="width: 200px" ></InputNumber>
<div style="margin:10px 0px">
@ -72,6 +72,11 @@
:formatter="value => `${value}%`"
:parser="value => value.replace('%', '')"></InputNumber>
</div>
<Divider></Divider>
<InputNumber disabled size="large" controls-outside :max="1000" :min="1" v-model="value20"></InputNumber>
<InputNumber size="default" controls-outside :max="1000" :min="1" v-model="value20"></InputNumber>
<InputNumber size="small" controls-outside :max="1000" :min="1" v-model="value20"></InputNumber>
</div>
</template>
<script>
@ -87,7 +92,8 @@
formatter2: (value) => `${value}%`,
parser2: (value) => value.replace('%', ''),
value9: 1000,
value10: 100
value10: 100,
value20: 2
};
},
methods: {

24
src/components/input-number/input-number.vue
View file

@ -1,6 +1,6 @@
<template>
<div :class="wrapClasses">
<div :class="handlerClasses">
<div :class="handlerClasses" v-if="!controlsOutside">
<a
@click="up"
:class="upClasses">
@ -12,6 +12,20 @@
<span :class="innerDownClasses" @click="preventDefault"></span>
</a>
</div>
<div
class="ivu-input-number-controls-outside-btn ivu-input-number-controls-outside-down"
:class="{ 'ivu-input-number-controls-outside-btn-disabled': downDisabled }"
v-if="controlsOutside"
@click="down">
<i class="ivu-icon ivu-icon-ios-remove"></i>
</div>
<div
class="ivu-input-number-controls-outside-btn ivu-input-number-controls-outside-up"
:class="{ 'ivu-input-number-controls-outside-btn-disabled': upDisabled }"
v-if="controlsOutside"
@click="up">
<i class="ivu-icon ivu-icon-ios-add"></i>
</div>
<div :class="inputWrapClasses">
<input
:id="elementId"
@ -132,6 +146,11 @@
type: String,
default: ''
},
// 4.5.0
controlsOutside: {
type: Boolean,
default: false
}
},
data () {
return {
@ -148,7 +167,8 @@
{
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-disabled`]: this.itemDisabled,
[`${prefixCls}-focused`]: this.focused
[`${prefixCls}-focused`]: this.focused,
[`${prefixCls}-controls-outside`]: this.controlsOutside
}
];
},

72
src/styles/components/input-number.less
View file

@ -188,6 +188,78 @@
.handler-disabled();
}
}
&-controls-outside{
width: 80px + 32px * 2;
padding: 0 32px;
.@{input-number-prefix-cls}-input{
border-radius: 0;
}
&-btn{
display: inline-block;
width: 32px;
height: 32px;
line-height: 30px;
position: absolute;
top: 0;
text-align: center;
background-color: @input-group-bg;
color: @input-color;
cursor: pointer;
i{
font-size: 16px;
}
&:hover i{
color: @primary-color;
}
&-disabled, &-disabled:hover{
cursor: @cursor-disabled;
i{
color: #ccc;
}
}
}
&-up{
right: 0;
border-left: 1px solid @input-border-color;
}
&-down{
left: 0;
border-right: 1px solid @input-border-color;
}
}
&-disabled&-controls-outside{
.@{input-number-prefix-cls}-controls-outside-btn{
cursor: @cursor-disabled;
i{
color: #ccc;
}
}
}
&-large&-controls-outside{
width: 80px + 40px *2;
padding: 0 40px;
.@{input-number-prefix-cls}-controls-outside-btn{
width: 40px;
height: 40px;
line-height: 38px;
i{
font-size: 20px;
}
}
}
&-small&-controls-outside{
width: 80px + 24px *2;
padding: 0 24px;
.@{input-number-prefix-cls}-controls-outside-btn{
width: 24px;
height: 24px;
line-height: 22px;
i{
font-size: 14px;
}
}
}
}
.@{form-item-prefix-cls}-error {