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.
1.2 KiB
1.2 KiB
#### 受控的checkbox
联动checkbox
#### Controlled Checkbox
Communicated with other components
<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>