add vc-input-number

pull/165/head
wangxueliang 2018-04-04 12:04:49 +08:00
parent a159e3fa93
commit 08c0a23628
10 changed files with 792 additions and 559 deletions

View File

@ -0,0 +1,56 @@
import InputNumber from '../src/index'
import '../assets/index.less'
export default {
data () {
return {
disabled: false,
readOnly: false,
value: 50000,
}
},
methods: {
onChange (value) {
console.log('onChange:', value)
this.value = value
},
toggleDisabled () {
this.disabled = !this.disabled
},
toggleReadOnly () {
this.readOnly = !this.readOnly
},
numberWithCommas (x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
},
format (num) {
return `$ ${this.numberWithCommas(num)} boeing737`
},
parser (num) {
return num.toString().split(' ')[1].replace(/,*/g, '')
},
},
render () {
return (
<div style='margin: 10px;'>
<InputNumber
min={-8000}
max={10000000}
value={this.value}
onChange={this.onChange}
style='width: 200px'
readOnly={this.readOnly}
disabled={this.disabled}
autoFocus={false}
step={100}
formatter={this.format}
parser={this.parser}
/>
<p style='padding:10px 0'>
<button onClick={this.toggleDisabled}>toggle Disabled</button>
<button onClick={this.toggleReadOnly}>toggle readOnly</button>
</p>
</div>
)
},
}

View File

@ -0,0 +1,43 @@
import InputNumber from '../src/index'
import '../assets/index.less'
export default {
data () {
return {
disabled: false,
readOnly: false,
value: 5,
}
},
methods: {
onChange (value) {
console.log('onChange:', value)
this.value = value
},
toggleDisabled () {
this.disabled = !this.disabled
},
toggleReadOnly () {
this.readOnly = !this.readOnly
},
},
render () {
const upHandler = (<div style={{ color: 'blue' }}>x</div>)
const downHandler = (<div style={{ color: 'red' }}>V</div>)
return (
<div style='margin: 10px;'>
<InputNumber
min={-8}
max={10}
value={this.value}
onChange={this.onChange}
style='width: 100px'
readOnly={this.readOnly}
disabled={this.disabled}
upHandler={upHandler}
downHandler={downHandler}
/>
</div>
)
},
}

View File

@ -0,0 +1,38 @@
import InputNumber from '../src/index'
import '../assets/index.less'
export default {
data () {
return {
precision: 2,
}
},
methods: {
onChange (value) {
console.log('onChange:', value)
this.value = value
},
changeprecision (e) {
this.precision = parseInt(e.target.value, 10)
},
},
render () {
return (
<div style='margin: 10px;'>
<InputNumber
defaultValue={1}
onChange={this.onChange}
precision={this.precision}
/>
<p style='padding:10px 0'>
precision:
<input
type='number'
onInput={this.changeprecision}
value={this.precision}
/>
</p>
</div>
)
},
}

View File

@ -0,0 +1,44 @@
import InputNumber from '../src/index'
import '../assets/index.less'
export default {
data () {
return {
disabled: false,
readOnly: false,
value: 5,
}
},
methods: {
onChange (value) {
console.log('onChange:', value)
this.value = value
},
toggleDisabled () {
this.disabled = !this.disabled
},
toggleReadOnly () {
this.readOnly = !this.readOnly
},
},
render () {
return (
<div style='margin: 10px;'>
<InputNumber
min={-8}
max={10}
value={this.value}
style='width: 100px'
onChange={this.onChange}
readOnly={this.readOnly}
disabled={this.disabled}
useTouch
/>
<p style='padding:10px 0'>
<button onClick={this.toggleDisabled}>toggle Disabled</button>
<button onClick={this.toggleReadOnly}>toggle readOnly</button>
</p>
</div>
)
},
}

View File

@ -0,0 +1,43 @@
import InputNumber from '../src/index'
import '../assets/index.less'
export default {
data () {
return {
disabled: false,
readOnly: false,
value: 5,
}
},
methods: {
onChange (value) {
console.log('onChange:', value)
this.value = value
},
toggleDisabled () {
this.disabled = !this.disabled
},
toggleReadOnly () {
this.readOnly = !this.readOnly
},
},
render () {
return (
<div style='margin: 10px;'>
<InputNumber
min={-8}
max={10}
value={this.value}
onChange={this.onChange}
style='width: 100px'
readOnly={this.readOnly}
disabled={this.disabled}
/>
<p style='padding:10px 0'>
<button onClick={this.toggleDisabled}>toggle Disabled</button>
<button onClick={this.toggleReadOnly}>toggle readOnly</button>
</p>
</div>
)
},
}

View File

@ -0,0 +1,36 @@
import InputNumber from '../src/index'
import '../assets/index.less'
export default {
data () {
return {
value: 0.000000001,
}
},
methods: {
onChange (value) {
console.log('onChange:', value)
this.value = value
},
toggleDisabled () {
this.disabled = !this.disabled
},
toggleReadOnly () {
this.readOnly = !this.readOnly
},
},
render () {
return (
<div style='margin: 10px;'>
<InputNumber
min={-10}
max={10}
step={0.000000001}
style='width: 100px'
value={this.value}
onChange={this.onChange}
/>
</div>
)
},
}

View File

@ -1,37 +1,33 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Touchable from 'rmc-feedback';
import PropTypes from '../../_util/vue-types'
import Touchable from '../../vc-m-feedback'
class InputHandler extends Component {
render() {
const {
prefixCls, disabled, onTouchStart, onTouchEnd,
onMouseDown, onMouseUp, onMouseLeave, ...otherProps,
} = this.props;
const InputHandler = {
props: {
prefixCls: PropTypes.string,
disabled: PropTypes.bool,
},
render () {
const { prefixCls, disabled } = this.$props
const touchableProps = {
props: {
disabled,
activeClassName: `${prefixCls}-handler-active`,
},
on: this.$listeners,
}
const spanProps = {
attrs: this.$attrs,
}
return (
<Touchable
disabled={disabled}
onTouchStart={onTouchStart}
onTouchEnd={onTouchEnd}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
onMouseLeave={onMouseLeave}
activeClassName={`${prefixCls}-handler-active`}
{...touchableProps}
>
<span {...otherProps} />
<span {...spanProps}>
{this.$slots.default}
</span>
</Touchable>
);
}
)
},
}
InputHandler.propTypes = {
prefixCls: PropTypes.string,
disabled: PropTypes.bool,
onTouchStart: PropTypes.func,
onTouchEnd: PropTypes.func,
onMouseDown: PropTypes.func,
onMouseUp: PropTypes.func,
onMouseLeave: PropTypes.func,
};
export default InputHandler;
export default InputHandler

File diff suppressed because it is too large Load Diff

View File

@ -3,11 +3,7 @@ const AsyncComp = () => {
const hashs = window.location.hash.split('/')
const d = hashs[hashs.length - 1]
return {
<<<<<<< HEAD
component: import(`../components/vc-m-feedback/demo/${d}`),
=======
component: import(`../components/table/demo/${d}`),
>>>>>>> 5d2271a131c74d672cc0cfada07e256752160b41
component: import(`../components/vc-input-number/demo/${d}`),
}
}
export default [

View File

@ -136,6 +136,7 @@
"dom-scroll-into-view": "^1.2.1",
"enquire.js": "^2.1.6",
"eslint-plugin-vue": "^3.13.0",
"is-negative-zero": "^2.0.0",
"lodash": "^4.17.5",
"moment": "^2.21.0",
"omit.js": "^1.0.0",