add vc-input-number
parent
a159e3fa93
commit
08c0a23628
|
@ -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>
|
||||
)
|
||||
},
|
||||
}
|
|
@ -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>
|
||||
)
|
||||
},
|
||||
}
|
|
@ -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>
|
||||
)
|
||||
},
|
||||
}
|
|
@ -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>
|
||||
)
|
||||
},
|
||||
}
|
|
@ -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>
|
||||
)
|
||||
},
|
||||
}
|
|
@ -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>
|
||||
)
|
||||
},
|
||||
}
|
|
@ -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
|
@ -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 [
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in New Issue