You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.2 KiB
57 lines
1.2 KiB
<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>
|
|
```
|