wangxueliang
7 years ago
18 changed files with 538 additions and 9 deletions
@ -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,28 @@
|
||||
<cn> |
||||
#### 小数 |
||||
和原生的数字输入框一样，value 的精度由 step 的小数位数决定。 |
||||
</cn> |
||||
|
||||
<us> |
||||
#### Decimals |
||||
A numeric-only input box whose values can be increased or decreased using a decimal step. The number of decimals (also known as precision) is determined by the step prop. |
||||
</us> |
||||
|
||||
```html |
||||
<template> |
||||
<a-input-number :min="0" :max="10" :step="0.1" @change="onChange" /> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
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,53 @@
|
||||
<script> |
||||
import Basic from './basic.md' |
||||
import Disabled from './disabled.md' |
||||
import Digit from './digit.md' |
||||
import Formatter from './formatter.md' |
||||
import Size from './size.md' |
||||
import CN from '../index.zh-CN.md' |
||||
import US from '../index.en-US.md' |
||||
|
||||
const md = { |
||||
cn: `# 数字输入框 |
||||
通过鼠标或键盘，输入范围内的数值。 |
||||
## 何时使用 |
||||
当需要获取标准数值时。 |
||||
## 代码演示`, |
||||
us: `# Data Entry |
||||
Enter a number within certain range with the mouse or keyboard. |
||||
## When To Use |
||||
When a numeric value needs to be provided. |
||||
## Examples |
||||
`, |
||||
} |
||||
export default { |
||||
category: 'Components', |
||||
subtitle: '数字输入框', |
||||
type: 'Data Entry', |
||||
title: 'InputNumber', |
||||
render () { |
||||
return ( |
||||
<div> |
||||
<md cn={md.cn} us={md.us}/> |
||||
<br/> |
||||
<Basic /> |
||||
<br/> |
||||
<Size /> |
||||
<br /> |
||||
<Disabled /> |
||||
<br/> |
||||
<Digit /> |
||||
<br/> |
||||
<Formatter /> |
||||
<br/> |
||||
<api> |
||||
<template slot='cn'> |
||||
<CN/> |
||||
</template> |
||||
<US/> |
||||
</api> |
||||
</div> |
||||
) |
||||
}, |
||||
} |
||||
</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