63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
Vue
<template>
|
|
<div>
|
|
<p :style="{ marginBottom: '20px' }">
|
|
<Checkbox
|
|
:checked="checked"
|
|
:disabled="disabled"
|
|
@change="onChange"
|
|
>
|
|
{{label}}
|
|
</Checkbox>
|
|
</p>
|
|
<p>
|
|
<AntButton
|
|
type="primary"
|
|
size="small"
|
|
@click="toggleChecked"
|
|
>
|
|
{{!checked ? 'Check' : 'Uncheck'}}
|
|
</AntButton>
|
|
<AntButton
|
|
:style="{ marginLeft: '10px' }"
|
|
type="primary"
|
|
size="small"
|
|
@click="toggleDisable"
|
|
>
|
|
{{!disabled ? 'Disable' : 'Enable'}}
|
|
</AntButton>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { Checkbox, Button } from 'antd'
|
|
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
|
|
},
|
|
},
|
|
components: {
|
|
Checkbox,
|
|
AntButton: Button,
|
|
},
|
|
}
|
|
</script>
|