63 lines
1.4 KiB
Vue
63 lines
1.4 KiB
Vue
|
import InputNumber from '../src/index'
|
||
|
import '../assets/index.less'
|
||
|
|
||
|
function getSum (str) {
|
||
|
let total = 0
|
||
|
str.split('').forEach((c) => {
|
||
|
const num = Number(c)
|
||
|
|
||
|
if (!isNaN(num)) {
|
||
|
total += num
|
||
|
}
|
||
|
})
|
||
|
|
||
|
return total
|
||
|
}
|
||
|
|
||
|
export default {
|
||
|
data () {
|
||
|
return {
|
||
|
value: 1000,
|
||
|
}
|
||
|
},
|
||
|
render () {
|
||
|
return (
|
||
|
<div style='margin: 10px;'>
|
||
|
<InputNumber
|
||
|
defaultValue={1000}
|
||
|
formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
|
||
|
/>
|
||
|
<InputNumber
|
||
|
defaultValue={100}
|
||
|
formatter={value => `${value}%`}
|
||
|
parser={value => value.replace('%', '')}
|
||
|
/>
|
||
|
<InputNumber
|
||
|
style='width: 100px'
|
||
|
formatter={value =>
|
||
|
`${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||
|
}
|
||
|
/>
|
||
|
|
||
|
<div>
|
||
|
<h1>In Control</h1>
|
||
|
<InputNumber
|
||
|
value={this.value}
|
||
|
onChange={(value) => { this.value = value }}
|
||
|
formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
|
||
|
/>
|
||
|
</div>
|
||
|
|
||
|
<div>
|
||
|
<h1>Strange Format</h1>
|
||
|
<InputNumber
|
||
|
defaultValue={1000}
|
||
|
formatter={value => `$ ${value} - ${getSum(value)}`}
|
||
|
parser={value => (value.match(/^\$ ([\d\.]*) .*$/) || [])[1]}
|
||
|
/>
|
||
|
</div>
|
||
|
</div>
|
||
|
)
|
||
|
},
|
||
|
}
|