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>
|
|
)
|
|
},
|
|
}
|