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.
59 lines
1.6 KiB
59 lines
1.6 KiB
<template>
|
|
<div>
|
|
<Checkbox :indeterminate="true" @change="change" name="test" value="123" />
|
|
<Checkbox @change="change" v-model="checked" name="test" value="123">Checkbox</Checkbox>
|
|
<Checkbox :disabled="true" @change="change" v-model="checked" name="test2" value="222">Checkbox</Checkbox>
|
|
|
|
<CheckboxGroup v-model="value" @change="change">
|
|
<AntButton @click="handleClick">
|
|
全选
|
|
</AntButton>
|
|
<AntButton @click="handleAddClick">
|
|
{{showMore ? "删除": "添加"}}
|
|
</AntButton>
|
|
<div>
|
|
<Checkbox name="test1" value="1">Checkbox1</Checkbox>
|
|
</div>
|
|
<Checkbox name="test2" value="2" disabled>Checkbox2</Checkbox>
|
|
<Checkbox name="test3" value="3" @change="change">Checkbox3</Checkbox>
|
|
<Checkbox v-if="showMore" name="test4" value="4">Checkbox4</Checkbox>
|
|
</CheckboxGroup>
|
|
<CheckboxGroup :options="options" v-model="value1" @change="change"></CheckboxGroup>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { Button, Checkbox } from '../components/index'
|
|
export default {
|
|
data () {
|
|
return {
|
|
visible: true,
|
|
checked: true,
|
|
options: [
|
|
{ label: 'Apple', value: 'Apple' },
|
|
{ label: 'Pear', value: 'Pear' },
|
|
{ label: 'Orange', value: 'Orange', disabled: false },
|
|
],
|
|
value: ['1'],
|
|
value1: [],
|
|
showMore: false,
|
|
}
|
|
},
|
|
methods: {
|
|
change (event) {
|
|
console.log(event)
|
|
},
|
|
handleClick () {
|
|
this.value = ['1', '2', '3']
|
|
},
|
|
handleAddClick () {
|
|
this.showMore = !this.showMore
|
|
},
|
|
},
|
|
components: {
|
|
Checkbox,
|
|
CheckboxGroup: Checkbox.Group,
|
|
AntButton: Button,
|
|
},
|
|
}
|
|
</script>
|