add InputNumber UI
add InputNumber UI
This commit is contained in:
parent
07aa688e3c
commit
95436eeb98
15 changed files with 345 additions and 16 deletions
|
@ -5,17 +5,13 @@
|
|||
@click="up"
|
||||
@mouse.down="preventDefault"
|
||||
:class="upClasses">
|
||||
<span
|
||||
:class="innerUpClasses"
|
||||
@click="preventDefault">+</span>
|
||||
<span :class="innerUpClasses" @click="preventDefault"></span>
|
||||
</a>
|
||||
<a
|
||||
@click="down"
|
||||
@mouse.down="preventDefault"
|
||||
:class="downClasses">
|
||||
<span
|
||||
:class="innerDownClasses"
|
||||
@click="preventDefault">-</span>
|
||||
<span :class="innerDownClasses" @click="preventDefault"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div :class="inputWrapClasses">
|
||||
|
@ -35,6 +31,7 @@
|
|||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-input-number';
|
||||
const iconPrefixCls = 'ivu-icon';
|
||||
|
||||
function isValueNumber (value) {
|
||||
return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)/).test(value + '');
|
||||
|
@ -122,7 +119,7 @@
|
|||
]
|
||||
},
|
||||
innerUpClasses () {
|
||||
return `${prefixCls}-handler-up-inner`;
|
||||
return `${prefixCls}-handler-up-inner ${iconPrefixCls} ${iconPrefixCls}-ios-arrow-up`;
|
||||
},
|
||||
downClasses () {
|
||||
return [
|
||||
|
@ -134,10 +131,13 @@
|
|||
]
|
||||
},
|
||||
innerDownClasses () {
|
||||
return `${prefixCls}-handler-down-inner`;
|
||||
return `${prefixCls}-handler-down-inner ${iconPrefixCls} ${iconPrefixCls}-ios-arrow-down`;
|
||||
},
|
||||
inputWrapClasses () {
|
||||
return `${prefixCls}-input-wrap`;
|
||||
},
|
||||
inputClasses () {
|
||||
return `${prefixCls}-input`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
2
dist/styles/iview.all.css
vendored
2
dist/styles/iview.all.css
vendored
File diff suppressed because one or more lines are too long
2
dist/styles/iview.css
vendored
2
dist/styles/iview.css
vendored
File diff suppressed because one or more lines are too long
|
@ -116,9 +116,14 @@
|
|||
</Switch>
|
||||
<Switch disabled></Switch>
|
||||
<Switch size="small"></Switch>
|
||||
<br><br>
|
||||
<Input-number :max="10" :min="1" :step="1.2" :value="1"></Input-number>
|
||||
<Input-number :value="2" size="small"></Input-number>
|
||||
<Input-number :value="2"></Input-number>
|
||||
<Input-number :value="2" size="large"></Input-number>
|
||||
</template>
|
||||
<script>
|
||||
import { Radio, Alert, Icon, Collapse, Button, Checkbox, Switch } from 'iview';
|
||||
import { Radio, Alert, Icon, Collapse, Button, Checkbox, Switch, InputNumber } from 'iview';
|
||||
|
||||
const RadioGroup = Radio.Group;
|
||||
const Panel = Collapse.Panel;
|
||||
|
@ -135,7 +140,8 @@
|
|||
Button,
|
||||
Checkbox,
|
||||
CheckboxGroup,
|
||||
Switch
|
||||
Switch,
|
||||
InputNumber
|
||||
},
|
||||
props: {
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iview",
|
||||
"version": "0.0.14",
|
||||
"version": "0.0.15",
|
||||
"title": "iView",
|
||||
"description": "A high quality UI components Library with Vue.js",
|
||||
"homepage": "http://www.iviewui.com",
|
||||
|
|
|
@ -12,3 +12,4 @@
|
|||
@import "radio";
|
||||
@import "checkbox";
|
||||
@import "switch";
|
||||
@import "input-number";
|
186
styles/components/input-number.less
Normal file
186
styles/components/input-number.less
Normal file
|
@ -0,0 +1,186 @@
|
|||
@input-number-prefix-cls: ~"@{css-prefix}input-number";
|
||||
|
||||
.handler-disabled() {
|
||||
opacity: 0.72;
|
||||
color: #ccc !important;
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
|
||||
.@{input-number-prefix-cls} {
|
||||
@radius-wrap: 0 @btn-border-radius @btn-border-radius 0;
|
||||
|
||||
.input;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
vertical-align: middle;
|
||||
border: 1px solid @border-color-base;
|
||||
border-radius: @btn-border-radius;
|
||||
overflow: hidden;
|
||||
|
||||
&-handler-wrap {
|
||||
width: 22px;
|
||||
height: 100%;
|
||||
border-left: 1px solid @border-color-base;
|
||||
border-radius: @radius-wrap;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
.transition(opacity @transition-time @ease-in-out);
|
||||
}
|
||||
|
||||
&:hover &-handler-wrap {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-handler-up {
|
||||
cursor: pointer;
|
||||
&-inner {
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&-handler-down {
|
||||
border-top: 1px solid @border-color-base;
|
||||
top: -1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-handler {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
line-height: 0;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
color: #999;
|
||||
position: relative;
|
||||
|
||||
&:hover &-up-inner,
|
||||
&:hover &-down-inner {
|
||||
color: tint(@primary-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
&-handler-up-inner,
|
||||
&-handler-down-inner {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
line-height: 12px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
.transition(all @transition-time linear);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.hover();
|
||||
}
|
||||
|
||||
&-focused {
|
||||
.active();
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
.disabled();
|
||||
}
|
||||
|
||||
&-input-wrap {
|
||||
overflow: hidden;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
&-input {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding: 0 7px;
|
||||
text-align: left;
|
||||
outline: 0;
|
||||
-moz-appearance: textfield;
|
||||
color: #666;
|
||||
border: 0;
|
||||
border-radius: @btn-border-radius;
|
||||
.transition(all @transition-time linear);
|
||||
|
||||
&[disabled] {
|
||||
.disabled();
|
||||
}
|
||||
}
|
||||
|
||||
&-large {
|
||||
padding: 0;
|
||||
.@{input-number-prefix-cls}-input-wrap {
|
||||
height: 32px;
|
||||
}
|
||||
.@{input-number-prefix-cls}-handler {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.@{input-number-prefix-cls}-handler-up-inner {
|
||||
top: 2px;
|
||||
}
|
||||
.@{input-number-prefix-cls}-handler-down-inner {
|
||||
bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&-small {
|
||||
padding: 0;
|
||||
.@{input-number-prefix-cls}-input-wrap {
|
||||
height: 22px;
|
||||
}
|
||||
.@{input-number-prefix-cls}-handler {
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
margin-top: -1px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.@{input-number-prefix-cls}-handler-up-inner {
|
||||
top: -1px;
|
||||
}
|
||||
.@{input-number-prefix-cls}-handler-down-inner {
|
||||
bottom: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&-handler-down-disabled,
|
||||
&-handler-up-disabled,
|
||||
&-disabled {
|
||||
.@{input-number-prefix-cls}-handler-down-inner,
|
||||
.@{input-number-prefix-cls}-handler-up-inner {
|
||||
.handler-disabled();
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
.@{input-number-prefix-cls}-input {
|
||||
opacity: 0.72;
|
||||
cursor: @cursor-disabled;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
.@{input-number-prefix-cls}-handler-wrap {
|
||||
display: none;
|
||||
}
|
||||
.@{input-number-prefix-cls}-handler {
|
||||
.handler-disabled();
|
||||
}
|
||||
}
|
||||
}
|
|
@ -19,6 +19,12 @@
|
|||
font-size: 12px;
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
|
||||
i{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
|
|
15
styles/mixins/common.less
Normal file
15
styles/mixins/common.less
Normal file
|
@ -0,0 +1,15 @@
|
|||
.placeholder(@color: @input-placeholder-color) {
|
||||
// Firefox
|
||||
&::-moz-placeholder {
|
||||
color: @color;
|
||||
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
|
||||
}
|
||||
// Internet Explorer 10+
|
||||
&:-ms-input-placeholder {
|
||||
color: @color;
|
||||
}
|
||||
// Safari and Chrome
|
||||
&::-webkit-input-placeholder {
|
||||
color: @color;
|
||||
}
|
||||
}
|
|
@ -1,3 +1,4 @@
|
|||
@import "common";
|
||||
@import "clearfix";
|
||||
@import "box-shadow";
|
||||
@import "transition";
|
||||
|
@ -9,3 +10,4 @@
|
|||
@import "loading";
|
||||
@import "close";
|
||||
@import "checkbox";
|
||||
@import "input";
|
77
styles/mixins/input.less
Normal file
77
styles/mixins/input.less
Normal file
|
@ -0,0 +1,77 @@
|
|||
.hover(@color: @input-hover-border-color) {
|
||||
border-color: tint(@color, 20%);
|
||||
}
|
||||
|
||||
.active(@color: @input-hover-border-color) {
|
||||
border-color: tint(@color, 20%);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 2px fade(@color, 20%);
|
||||
}
|
||||
|
||||
.disabled() {
|
||||
background-color: @input-disabled-bg;
|
||||
opacity: 1;
|
||||
cursor: @cursor-disabled;
|
||||
color: #ccc;
|
||||
&:hover {
|
||||
.hover(@input-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.input-large() {
|
||||
padding: @input-padding-vertical-large @input-padding-horizontal;
|
||||
height: @input-height-large;
|
||||
}
|
||||
|
||||
.input-small() {
|
||||
padding: @input-padding-vertical-small @input-padding-horizontal;
|
||||
height: @input-height-small;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
|
||||
.input() {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: @input-height-base;
|
||||
line-height: @line-height-base;
|
||||
padding: @input-padding-vertical-base @input-padding-horizontal;
|
||||
font-size: @font-size-base;
|
||||
border: 1px solid @input-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
color: @input-color;
|
||||
background-color: @input-bg;
|
||||
background-image: none;
|
||||
position: relative;
|
||||
cursor: text;
|
||||
.placeholder();
|
||||
.transition3(border @transition-time @ease-in-out, background @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out);
|
||||
|
||||
&:hover {
|
||||
.hover();
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.active();
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
.disabled();
|
||||
}
|
||||
|
||||
// Reset height for textarea
|
||||
textarea& {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
// Size
|
||||
&-large {
|
||||
.input-large();
|
||||
}
|
||||
|
||||
&-small {
|
||||
.input-small();
|
||||
}
|
||||
}
|
|
@ -6,3 +6,15 @@
|
|||
.square(@size) {
|
||||
.size(@size; @size);
|
||||
}
|
||||
|
||||
// fix chrome 12px bug, support ie
|
||||
.iconfont-size-under-12px(@size, @rotate: 0deg) {
|
||||
display: inline-block;
|
||||
@font-scale: unit(@size / @font-size-base);
|
||||
font-size: @font-size-base;
|
||||
font-size: ~"@{size} \9"; // ie8-9
|
||||
.transform(scale(@font-scale) rotate(@rotate));
|
||||
:root & {
|
||||
font-size: @font-size-base; // reset ie9 and above
|
||||
}
|
||||
}
|
|
@ -8,3 +8,8 @@
|
|||
-moz-transition: @string1 , @string2;
|
||||
transition: @string1 , @string2;
|
||||
}
|
||||
.transition3 (@string1, @string2, @string3) {
|
||||
-webkit-transition: @string1 , @string2 , @string3;
|
||||
-moz-transition: @string1 , @string2 , @string3;
|
||||
transition: @string1 , @string2 , @string3;
|
||||
}
|
|
@ -76,6 +76,25 @@
|
|||
// Legend
|
||||
@legend-color : #999;
|
||||
|
||||
// Input
|
||||
@input-height-base : 28px;
|
||||
@input-height-large : 32px;
|
||||
@input-height-small : 22px;
|
||||
|
||||
@input-padding-horizontal : 7px;
|
||||
@input-padding-vertical-base : 4px;
|
||||
@input-padding-vertical-small: 1px;
|
||||
@input-padding-vertical-large: 6px;
|
||||
|
||||
@input-placeholder-color : #ccc;
|
||||
@input-color : @text-color;
|
||||
@input-border-color : @border-color-base;
|
||||
@input-bg : #fff;
|
||||
|
||||
@input-hover-border-color : @primary-color;
|
||||
@input-focus-border-color : @primary-color;
|
||||
@input-disabled-bg : #f3f3f3;
|
||||
|
||||
// Z-index
|
||||
@zindex-affix : 10;
|
||||
@zindex-back-top : 10;
|
||||
|
|
Loading…
Add table
Reference in a new issue