mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-04 04:58:16 +08:00
Merge branch 'master' of https://github.com/vueComponent/ant-design
This commit is contained in:
tangjinzhou
commit
44b2c3a477
@ -146,3 +146,5 @@ export { default as Progress } from './progress'
|
||||
import Timeline from './timeline'
|
||||
const TimelineItem = Timeline.Item
|
||||
export { Timeline, TimelineItem }
|
||||
|
||||
export { default as InputNumber } from './input-number'
|
||||
|
||||
35
components/input-number/demo/basic.md
Normal file
35
components/input-number/demo/basic.md
Normal file
@ -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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
28
components/input-number/demo/digit.md
Normal file
28
components/input-number/demo/digit.md
Normal file
@ -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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
37
components/input-number/demo/disabled.md
Normal file
37
components/input-number/demo/disabled.md
Normal file
@ -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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
42
components/input-number/demo/formatter.md
Normal file
42
components/input-number/demo/formatter.md
Normal file
@ -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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
53
components/input-number/demo/index.vue
Normal file
53
components/input-number/demo/index.vue
Normal file
@ -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>
|
||||
36
components/input-number/demo/size.md
Normal file
36
components/input-number/demo/size.md
Normal file
@ -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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
28
components/input-number/index.en-US.md
Normal file
28
components/input-number/index.en-US.md
Normal file
@ -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 |
|
||||
62
components/input-number/index.jsx
Normal file
62
components/input-number/index.jsx
Normal file
@ -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} />
|
||||
},
|
||||
}
|
||||
29
components/input-number/index.zh-CN.md
Normal file
29
components/input-number/index.zh-CN.md
Normal file
@ -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() | 获取焦点 |
|
||||
2
components/input-number/style/index.jsx
Normal file
2
components/input-number/style/index.jsx
Normal file
@ -0,0 +1,2 @@
|
||||
import '../../style/index.less'
|
||||
import './index.less'
|
||||
171
components/input-number/style/index.less
Normal file
171
components/input-number/style/index.less
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import Basic from './basic.md'
|
||||
// import InputNumber from './input-number.md'
|
||||
import InputNumber from './input-number.md'
|
||||
import IconSlider from './icon-slider.md'
|
||||
import TipFormatter from './tip-formatter.md'
|
||||
import Event from './event.md'
|
||||
@ -34,6 +34,8 @@ export default {
|
||||
<br/>
|
||||
<Basic />
|
||||
<br />
|
||||
<InputNumber />
|
||||
<br />
|
||||
<IconSlider />
|
||||
<br />
|
||||
<TipFormatter />
|
||||
|
||||
@ -15,28 +15,28 @@ Synchronize with [InptNumber](#/us/components/input-number/) component.
|
||||
<a-col :span="12">
|
||||
<a-slider :min="1" :max="20" v-model="inputValue1" />
|
||||
</a-col>
|
||||
<!-- <a-col :span="4">
|
||||
<a-inputNumber
|
||||
<a-col :span="4">
|
||||
<a-input-number
|
||||
:min="1"
|
||||
:max="20"
|
||||
style="marginLeft: 16px"
|
||||
v-model="inputValue1"
|
||||
/>
|
||||
</a-ol> -->
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-slider :min="0" :max="1" v-model="inputValue" :step="0.01" />
|
||||
</a-col>
|
||||
<!-- <a-col :span="4">
|
||||
<a-inputNumber
|
||||
<a-col :span="4">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.01"
|
||||
style="marginLeft: 16px"
|
||||
v-model="inputValue"
|
||||
/>
|
||||
</a-col> -->
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -38,3 +38,4 @@ import './slider/style'
|
||||
import './table/style'
|
||||
import './progress/style'
|
||||
import './timeline/style'
|
||||
import './input-number/style'
|
||||
|
||||
@ -17,7 +17,7 @@ const md = {
|
||||
## 代码演示`,
|
||||
us: `# Data Display
|
||||
Vertical display timeline.
|
||||
|
||||
## When To Use
|
||||
- When a series of information needs to be ordered by time (ascend or descend).
|
||||
- When you need a timeline to make a visual connection.
|
||||
## Examples
|
||||
|
||||
@ -39,3 +39,4 @@ export { default as slider } from 'antd/slider/demo/index.vue'
|
||||
export { default as progress } from 'antd/progress/demo/index.vue'
|
||||
export { default as timeline } from 'antd/timeline/demo/index.vue'
|
||||
export { default as table } from 'antd/table/demo/index.vue'
|
||||
export { default as inputNumber } from 'antd/input-number/demo/index.vue'
|
||||
|
||||
@ -3,7 +3,7 @@ const AsyncComp = () => {
|
||||
const hashs = window.location.hash.split('/')
|
||||
const d = hashs[hashs.length - 1]
|
||||
return {
|
||||
component: import(`../components/vc-input-number/demo/${d}`),
|
||||
component: import(`../components/input-number/demo/${d}`),
|
||||
}
|
||||
}
|
||||
export default [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user