Merge branch 'master' of https://github.com/vueComponent/ant-design
tangjinzhou
7 years ago
commit
b375747fda
@ -0,0 +1,35 @@
|
||||
<cn>
|
||||
#### 基本
|
||||
数字输入框。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Basic
|
||||
Numeric-only input box.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-input-number :min="1" :max="10" v-model="value" @change="onChange" />
|
||||
当前值：{{value}}
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 3
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(value) {
|
||||
console.log('changed', value);
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,37 @@
|
||||
<cn>
|
||||
#### 不可用
|
||||
点击按钮切换可用状态。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Disabled
|
||||
Click the button to toggle between available and disabled states.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-input-number :min="1" :max="10" :disabled="disabled" :defaultValue="3" />
|
||||
<div style="marginTop:20px">
|
||||
<a-button @click="toggle" type="primary">Toggle disabled</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
disabled: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle() {
|
||||
this.disabled = !this.disabled
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,42 @@
|
||||
<cn>
|
||||
#### 格式化展示
|
||||
通过 `formatter` 格式化数字，以展示具有具体含义的数据，往往需要配合 `parser` 一起使用。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Formatter
|
||||
Display value within it's situation with `formatter`, and we usually use `parser` at the same time.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-input-number
|
||||
:defaultValue="1000"
|
||||
:formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
|
||||
:parser="value => value.replace(/\$\s?|(,*)/g, '')"
|
||||
@change="onChange"
|
||||
/>
|
||||
<a-input-number
|
||||
:defaultValue="100"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:formatter="value => `${value}%`"
|
||||
:parser="value => value.replace('%', '')"
|
||||
@change="onChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
onChange(value) {
|
||||
console.log('changed', value);
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,36 @@
|
||||
<cn>
|
||||
#### 三种大小
|
||||
三种大小的数字输入框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `40px` 和 `24px` ，默认高度为 `32px`。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Sizes
|
||||
There are three sizes available to a numeric input box. By default, the size is `32px`. The two additional sizes are `large` and `small` which means `40px` and `24px`, respectively.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-input-number size="large" :min="1" :max="100000" :defaultValue="3" @change="onChange" />
|
||||
<a-input-number :min="1" :max="100000" :defaultValue="3" @change="onChange" />
|
||||
<a-input-number size="small" :min="1" :max="100000" :defaultValue="3" @change="onChange" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
onChange(value) {
|
||||
console.log('changed', value);
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-input-number {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,28 @@
|
||||
## API
|
||||
|
||||
| property | description | type | default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| autoFocus | get focus when component mounted | boolean | false |
|
||||
| defaultValue | initial value | number | |
|
||||
| disabled | disable the input | boolean | false |
|
||||
| formatter | Specifies the format of the value presented | function(value: number \| string): string | - |
|
||||
| max | max vale | number | Infinity |
|
||||
| min | min value | number | -Infinity |
|
||||
| parser | Specifies the value extracted from formatter | function( string): number | - |
|
||||
| precision | precision of input value | number | - |
|
||||
| size | width of input box | string | - |
|
||||
| step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 |
|
||||
| value(v-model) | current value | number | |
|
||||
|
||||
|
||||
### events
|
||||
| Events Name | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| change | The callback triggered when the value is changed. | function(value: number \| string) | |
|
||||
|
||||
## Methods
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ----------- |
|
||||
| blur() | remove focus |
|
||||
| focus() | get focus |
|
||||
@ -0,0 +1,62 @@
|
||||
import PropTypes from '../_util/vue-types'
|
||||
import { initDefaultProps, getOptionProps } from '../_util/props-util'
|
||||
import classNames from 'classnames'
|
||||
import VcInputNumber from '../vc-input-number/src'
|
||||
|
||||
export const InputNumberProps = {
|
||||
prefixCls: PropTypes.string,
|
||||
min: PropTypes.number,
|
||||
max: PropTypes.number,
|
||||
value: PropTypes.number,
|
||||
step: PropTypes.oneOfType([
|
||||
PropTypes.number,
|
||||
PropTypes.string,
|
||||
]),
|
||||
defaultValue: PropTypes.number,
|
||||
tabIndex: PropTypes.number,
|
||||
disabled: PropTypes.bool,
|
||||
size: PropTypes.oneOf(['large', 'small', 'default']),
|
||||
formatter: PropTypes.func,
|
||||
parser: PropTypes.func,
|
||||
placeholder: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
id: PropTypes.string,
|
||||
precision: PropTypes.number,
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'InputNumber',
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
props: initDefaultProps(InputNumberProps, {
|
||||
prefixCls: 'ant-input-number',
|
||||
step: 1,
|
||||
}),
|
||||
methods: {
|
||||
focus () {
|
||||
this.$refs.inputNumberRef.focus()
|
||||
},
|
||||
blur () {
|
||||
this.$refs.inputNumberRef.blur()
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const { size, ...others } = getOptionProps(this)
|
||||
const inputNumberClass = classNames({
|
||||
[`${this.prefixCls}-lg`]: size === 'large',
|
||||
[`${this.prefixCls}-sm`]: size === 'small',
|
||||
})
|
||||
const vcInputNumberprops = {
|
||||
props: {
|
||||
...others,
|
||||
},
|
||||
class: inputNumberClass,
|
||||
ref: 'inputNumberRef',
|
||||
on: this.$listeners,
|
||||
}
|
||||
return <VcInputNumber {...vcInputNumberprops} />
|
||||
},
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
## API
|
||||
|
||||
属性如下
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| autoFocus | 自动获取焦点 | boolean | false |
|
||||
| defaultValue | 初始值 | number | |
|
||||
| disabled | 禁用 | boolean | false |
|
||||
| formatter | 指定输入框展示值的格式 | function(value: number \| string): string | - |
|
||||
| max | 最大值 | number | Infinity |
|
||||
| min | 最小值 | number | -Infinity |
|
||||
| parser | 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用 | function( string): number | - |
|
||||
| precision | 数值精度 | number | - |
|
||||
| size | 输入框大小 | string | 无 |
|
||||
| step | 每次改变步数，可以为小数 | number\|string | 1 |
|
||||
| value(v-model) | 当前值 | number | |
|
||||
|
||||
### 事件
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| change | 变化回调 | Function(value: number \| string) | |
|
||||
|
||||
## 方法
|
||||
|
||||
| 名称 | 描述 |
|
||||
| --- | --- |
|
||||
| blur() | 移除焦点 |
|
||||
| focus() | 获取焦点 |
|
||||
@ -0,0 +1,2 @@
|
||||
import '../../style/index.less'
|
||||
import './index.less'
|
||||
@ -0,0 +1,171 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
@import "../../input/style/mixin";
|
||||
|
||||
@input-number-prefix-cls: ~"@{ant-prefix}-input-number";
|
||||
|
||||
.@{input-number-prefix-cls} {
|
||||
.reset-component;
|
||||
.input;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
width: 90px;
|
||||
|
||||
&-handler {
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
height: 50%;
|
||||
overflow: hidden;
|
||||
color: @text-color-secondary;
|
||||
position: relative;
|
||||
transition: all 0.1s linear;
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
&:active {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
&:hover &-up-inner,
|
||||
&:hover &-down-inner {
|
||||
color: @primary-5;
|
||||
}
|
||||
}
|
||||
|
||||
&-handler-up-inner,
|
||||
&-handler-down-inner {
|
||||
.iconfont-mixin();
|
||||
line-height: 12px;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transition: all 0.1s linear;
|
||||
.iconfont-size-under-12px(7px);
|
||||
right: 4px;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.hover();
|
||||
}
|
||||
|
||||
&-focused {
|
||||
.active();
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
.disabled();
|
||||
.@{input-number-prefix-cls}-input {
|
||||
cursor: not-allowed;
|
||||
background-color: @disabled-bg;
|
||||
}
|
||||
.@{input-number-prefix-cls}-handler-wrap {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-input {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
outline: 0;
|
||||
-moz-appearance: textfield;
|
||||
height: @input-height-base - 2px;
|
||||
transition: all 0.3s linear;
|
||||
color: @input-color;
|
||||
background-color: @input-bg;
|
||||
border: 0;
|
||||
border-radius: @border-radius-base;
|
||||
padding: 0 @control-padding-horizontal - 1px;
|
||||
display: block;
|
||||
.placeholder();
|
||||
|
||||
&[disabled] {
|
||||
.disabled();
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
padding: 0;
|
||||
font-size: @font-size-lg;
|
||||
|
||||
input {
|
||||
height: @input-height-lg - 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&-sm {
|
||||
padding: 0;
|
||||
|
||||
input {
|
||||
height: @input-height-sm - 2px;
|
||||
padding: 0 @control-padding-horizontal-sm - 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&-handler-wrap {
|
||||
border-left: @border-width-base @border-style-base @border-color-base;
|
||||
width: 22px;
|
||||
height: 100%;
|
||||
background: @component-background;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
transition: opacity 0.24s linear 0.1s;
|
||||
z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
|
||||
}
|
||||
|
||||
&-handler-wrap:hover &-handler {
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
&:hover &-handler-wrap {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-handler-up {
|
||||
cursor: pointer;
|
||||
&-inner {
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
&:before {
|
||||
text-align: center;
|
||||
content: "\e61e";
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
height: 60% !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-handler-down {
|
||||
border-top: @border-width-base @border-style-base @border-color-base;
|
||||
top: -1px;
|
||||
cursor: pointer;
|
||||
&-inner {
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
&:before {
|
||||
text-align: center;
|
||||
content: "\e61d";
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
height: 60% !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-handler-up-disabled,
|
||||
&-handler-down-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&-handler-up-disabled:hover &-handler-up-inner,
|
||||
&-handler-down-disabled:hover &-handler-down-inner {
|
||||
color: @disabled-color;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue