drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed #778

Browse source
This commit is contained in:
梁灏 2017-04-27 14:33:25 +08:00
parent 545aa32b43
commit 01b8d340c5
2 changed files with 19 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
examples/routers/checkbox.vue
View file

@ -1,56 +1,9 @@
<template>
<div>
<Checkbox v-model="single" @on-change="s">Checkbox</Checkbox>
{{ single }}
<div @click="single = !single">single-change</div>
<br>
{{ social }}
<Checkbox-group v-model="social" @on-change="s">
<Checkbox label="twitter">
<Icon type="social-twitter"></Icon>
<span>Twitter</span>
</Checkbox>
<Checkbox label="facebook">
<Icon type="social-facebook"></Icon>
<span>Facebook</span>
</Checkbox>
<Checkbox label="github">
<Icon type="social-github"></Icon>
<span>Github</span>
</Checkbox>
<Checkbox label="snapchat">
<Icon type="social-snapchat"></Icon>
<span>Snapchat</span>
</Checkbox>
</Checkbox-group>
<br>
<div @click="c">修改1</div>
{{ fruit }}
<Checkbox-group v-model="fruit">
<Row>
<i-col span="8">
<Checkbox label="香蕉"></Checkbox>
</i-col>
<i-col span="8">
<Checkbox label="苹果"></Checkbox>
</i-col>
<i-col span="8">
<Checkbox label="西瓜"></Checkbox>
</i-col>
</Row>
</Checkbox-group>
<br><br>
<div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
<Checkbox
:indeterminate="indeterminate"
v-model="checkAll"
@click.prevent.native="handleCheckAll">全选</Checkbox>
</div>
<Checkbox-group v-model="checkAllGroup" @on-change="checkAllGroupChange">
<Checkbox label="香蕉"></Checkbox>
<Checkbox label="苹果"></Checkbox>
<Checkbox label="西瓜"></Checkbox>
<Checkbox v-for="item in tags" :label="item.label"></Checkbox>
</Checkbox-group>
<div>{{ fruit }}</div>
</div>
</template>
<script>
@ -59,45 +12,23 @@
return {
social: ['facebook', 'github'],
fruit: ['苹果'],
single: false,
indeterminate: true,
checkAll: false,
checkAllGroup: ['香蕉', '西瓜']
tags: []
}
},
methods: {
c () {
this.social.splice(0, 1)
},
s (d) {
console.log(d)
},
handleCheckAll () {
if (this.indeterminate) {
this.checkAll = false;
} else {
this.checkAll = !this.checkAll;
}
this.indeterminate = false;
if (this.checkAll) {
this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
} else {
this.checkAllGroup = [];
}
},
checkAllGroupChange (data) {
if (data.length === 3) {
this.indeterminate = false;
this.checkAll = true;
} else if (data.length > 0) {
this.indeterminate = true;
this.checkAll = false;
} else {
this.indeterminate = false;
this.checkAll = false;
}
}
mounted () {
setTimeout(() => {
this.tags = [
{
label: '香蕉'
},
{
label: '苹果'
},
{
label: '西瓜'
}
]
}, 1000);
}
}
</script>

2
src/components/checkbox/checkbox.vue
View file

@ -90,6 +90,8 @@
if (!this.group) {
this.updateModel();
this.showSlot = this.$slots.default !== undefined;
} else {
this.parent.updateModel(true);
}
},
methods: {