70 lines
1.2 KiB
Markdown
70 lines
1.2 KiB
Markdown
<cn>
|
|
#### 受控的checkbox
|
|
联动checkbox
|
|
</cn>
|
|
|
|
<us>
|
|
#### Controlled Checkbox
|
|
Communicated with other components
|
|
</us>
|
|
|
|
```html
|
|
<template>
|
|
<div>
|
|
<p :style="{ marginBottom: '20px' }">
|
|
<a-checkbox
|
|
:checked="checked"
|
|
:disabled="disabled"
|
|
@change="onChange"
|
|
>
|
|
{{label}}
|
|
</a-checkbox>
|
|
</p>
|
|
<p>
|
|
<a-button
|
|
type="primary"
|
|
size="small"
|
|
@click="toggleChecked"
|
|
>
|
|
{{!checked ? 'Check' : 'Uncheck'}}
|
|
</a-button>
|
|
<a-button
|
|
:style="{ marginLeft: '10px' }"
|
|
type="primary"
|
|
size="small"
|
|
@click="toggleDisable"
|
|
>
|
|
{{!disabled ? 'Disable' : 'Enable'}}
|
|
</a-button>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
checked: true,
|
|
disabled: false,
|
|
}
|
|
},
|
|
computed: {
|
|
label () {
|
|
const { checked, disabled } = this
|
|
return `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`
|
|
},
|
|
},
|
|
methods: {
|
|
toggleChecked () {
|
|
this.checked = !this.checked
|
|
},
|
|
toggleDisable () {
|
|
this.disabled = !this.disabled
|
|
},
|
|
onChange (e) {
|
|
this.checked = e.target.checked
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
```
|