84 lines
1.8 KiB
JavaScript
84 lines
1.8 KiB
JavaScript
|
/* eslint no-console:0 */
|
||
|
import Checkbox from '../index'
|
||
|
import '../assets/index.less'
|
||
|
|
||
|
function onChange (e) {
|
||
|
console.log('Checkbox checked:', (e.target.checked))
|
||
|
}
|
||
|
|
||
|
export default {
|
||
|
data () {
|
||
|
return {
|
||
|
disabled: false,
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
toggle () {
|
||
|
this.disabled = !this.disabled
|
||
|
},
|
||
|
},
|
||
|
render () {
|
||
|
return (
|
||
|
<div style={{ margin: '20px' }}>
|
||
|
<div>
|
||
|
<p>
|
||
|
<label>
|
||
|
<Checkbox
|
||
|
checked
|
||
|
onChange={onChange}
|
||
|
disabled={this.disabled}
|
||
|
/>
|
||
|
controlled checked rc-checkbox
|
||
|
</label>
|
||
|
|
||
|
</p>
|
||
|
<p>
|
||
|
<label>
|
||
|
<input
|
||
|
checked
|
||
|
type='checkbox'
|
||
|
onChange={onChange}
|
||
|
disabled={this.disabled}
|
||
|
/>
|
||
|
controlled checked native
|
||
|
</label>
|
||
|
|
||
|
</p>
|
||
|
</div>
|
||
|
|
||
|
<div>
|
||
|
<p>
|
||
|
<label>
|
||
|
<Checkbox
|
||
|
defaultChecked
|
||
|
onChange={onChange}
|
||
|
disabled={this.disabled}
|
||
|
/>
|
||
|
defaultChecked rc-checkbox
|
||
|
</label>
|
||
|
|
||
|
</p>
|
||
|
</div>
|
||
|
|
||
|
<div>
|
||
|
<p>
|
||
|
<label>
|
||
|
<Checkbox
|
||
|
name='my-checkbox'
|
||
|
defaultChecked
|
||
|
onChange={onChange}
|
||
|
disabled={this.disabled}
|
||
|
id='test'
|
||
|
/>
|
||
|
defaultChecked rc-checkbox with name
|
||
|
</label>
|
||
|
|
||
|
</p>
|
||
|
</div>
|
||
|
|
||
|
<button onClick={this.toggle}>toggle disabled</button>
|
||
|
</div>
|
||
|
)
|
||
|
},
|
||
|
}
|