support Checkbox
support Checkbox
This commit is contained in:
梁灏
parent
06322514c6
commit
cbe03a12b2
10 changed files with 146 additions and 29 deletions
|
|
@ -4,3 +4,7 @@
|
|||
使用 v-model
|
||||
### Radio
|
||||
value 改为了 label，使用 v-model，废弃 checked
|
||||
### Checkbox
|
||||
使用 v-model
|
||||
### CheckboxGroup
|
||||
value 改为了 label，使用 v-model，废弃 checked
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
- [x] Icon
|
||||
- [x] Input
|
||||
- [x] Radio
|
||||
- [ ] Checkbox
|
||||
- [x] Checkbox
|
||||
- [ ] Switch
|
||||
- [ ] Table
|
||||
- [ ] Select
|
||||
|
|
|
|||
|
|
@ -9,42 +9,49 @@
|
|||
export default {
|
||||
name: 'checkboxGroup',
|
||||
props: {
|
||||
model: {
|
||||
value: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
currentValue: this.value
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return `${prefixCls}`;
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
mounted () {
|
||||
this.updateModel(true);
|
||||
},
|
||||
methods: {
|
||||
updateModel (update) {
|
||||
const model = this.model;
|
||||
const value = this.value;
|
||||
|
||||
this.$children.forEach((child) => {
|
||||
child.model = model;
|
||||
child.model = value;
|
||||
|
||||
if (update) {
|
||||
child.selected = model.indexOf(child.value) >= 0;
|
||||
child.currentValue = value.indexOf(child.label) >= 0;
|
||||
child.group = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
change (data) {
|
||||
this.model = data;
|
||||
this.currentValue = data;
|
||||
this.$emit('input', data);
|
||||
this.$emit('on-change', data);
|
||||
this.$dispatch('on-form-change', data);
|
||||
// todo 事件
|
||||
// this.$dispatch('on-form-change', data);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
model () {
|
||||
value () {
|
||||
this.updateModel(true);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
type="checkbox"
|
||||
:class="inputClasses"
|
||||
:disabled="disabled"
|
||||
:value="value"
|
||||
:value="label"
|
||||
v-model="model"
|
||||
@change="change">
|
||||
<input
|
||||
|
|
@ -15,28 +15,29 @@
|
|||
type="checkbox"
|
||||
:class="inputClasses"
|
||||
:disabled="disabled"
|
||||
v-model="checked"
|
||||
:checked="currentValue"
|
||||
@change="change">
|
||||
</span>
|
||||
<slot v-if="showSlot"><span v-el:slot>{{ value }}</span></slot>
|
||||
<slot v-if="showSlot"><span ref="slot">{{ label }}</span></slot>
|
||||
</label>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-checkbox';
|
||||
|
||||
export default {
|
||||
name: 'Checkbox',
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: [String, Number, Boolean]
|
||||
},
|
||||
checked: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
label: {
|
||||
type: [String, Number, Boolean]
|
||||
},
|
||||
indeterminate: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
@ -45,7 +46,7 @@
|
|||
data () {
|
||||
return {
|
||||
model: [],
|
||||
selected: false,
|
||||
currentValue: this.value,
|
||||
group: false,
|
||||
showSlot: true
|
||||
};
|
||||
|
|
@ -56,7 +57,7 @@
|
|||
`${prefixCls}-wrapper`,
|
||||
{
|
||||
[`${prefixCls}-group-item`]: this.group,
|
||||
[`${prefixCls}-wrapper-checked`]: this.selected,
|
||||
[`${prefixCls}-wrapper-checked`]: this.currentValue,
|
||||
[`${prefixCls}-wrapper-disabled`]: this.disabled
|
||||
}
|
||||
];
|
||||
|
|
@ -65,7 +66,7 @@
|
|||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-checked`]: this.selected,
|
||||
[`${prefixCls}-checked`]: this.currentValue,
|
||||
[`${prefixCls}-disabled`]: this.disabled,
|
||||
[`${prefixCls}-indeterminate`]: this.indeterminate
|
||||
}
|
||||
|
|
@ -78,11 +79,12 @@
|
|||
return `${prefixCls}-input`;
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
mounted () {
|
||||
// todo 使用 while向上查找
|
||||
if (this.$parent && this.$parent.$options.name === 'checkboxGroup') this.group = true;
|
||||
if (!this.group) {
|
||||
this.updateModel();
|
||||
if (this.$els.slot && this.$els.slot.innerHTML === '') {
|
||||
if (this.$refs.slot && this.$refs.slot.innerHTML === '') {
|
||||
this.showSlot = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -93,21 +95,24 @@
|
|||
return false;
|
||||
}
|
||||
|
||||
this.selected = event.target.checked;
|
||||
const checked = event.target.checked;
|
||||
this.currentValue = checked;
|
||||
this.$emit('input', checked);
|
||||
|
||||
if (this.group) {
|
||||
this.$parent.change(this.model);
|
||||
} else {
|
||||
this.$emit('on-change', this.checked);
|
||||
this.$dispatch('on-form-change', this.checked);
|
||||
this.$emit('on-change', checked);
|
||||
// todo 事件
|
||||
// this.$dispatch('on-form-change', checked);
|
||||
}
|
||||
},
|
||||
updateModel () {
|
||||
this.selected = this.checked;
|
||||
this.currentValue = this.value;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
checked () {
|
||||
value () {
|
||||
this.updateModel();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
data () {
|
||||
return {
|
||||
currentValue: this.value
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@
|
|||
}
|
||||
},
|
||||
mounted () {
|
||||
// todo 使用 while向上查找
|
||||
if (this.$parent && this.$parent.$options.name === 'radioGroup') this.group = true;
|
||||
if (!this.group) {
|
||||
this.updateValue();
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import Button from './components/button';
|
|||
// import Card from './components/card';
|
||||
// import Carousel from './components/carousel';
|
||||
// import Cascader from './components/cascader';
|
||||
// import Checkbox from './components/checkbox';
|
||||
import Checkbox from './components/checkbox';
|
||||
// import Circle from './components/circle';
|
||||
// import Collapse from './components/collapse';
|
||||
// import DatePicker from './components/date-picker';
|
||||
|
|
@ -60,8 +60,8 @@ const iview = {
|
|||
// Carousel,
|
||||
// CarouselItem: Carousel.Item,
|
||||
// Cascader,
|
||||
// Checkbox,
|
||||
// CheckboxGroup: Checkbox.Group,
|
||||
Checkbox,
|
||||
CheckboxGroup: Checkbox.Group,
|
||||
// Circle,
|
||||
// DatePicker,
|
||||
// Dropdown,
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ li + li {
|
|||
<li><router-link to="/button">Button</router-link></li>
|
||||
<li><router-link to="/input">Input</router-link></li>
|
||||
<li><router-link to="/radio">Radio</router-link></li>
|
||||
<li><router-link to="/checkbox">Checkbox</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,10 @@ const router = new VueRouter({
|
|||
{
|
||||
path: '/radio',
|
||||
component: require('./routers/radio.vue')
|
||||
},
|
||||
{
|
||||
path: '/checkbox',
|
||||
component: require('./routers/checkbox.vue')
|
||||
}
|
||||
]
|
||||
});
|
||||
|
|
|
|||
95
test/routers/checkbox.vue
Normal file
95
test/routers/checkbox.vue
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<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">
|
||||
<Checkbox label="香蕉"></Checkbox>
|
||||
<Checkbox label="苹果"></Checkbox>
|
||||
<Checkbox label="西瓜"></Checkbox>
|
||||
</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-group>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
social: ['facebook', 'github'],
|
||||
fruit: ['苹果'],
|
||||
single: false,
|
||||
indeterminate: true,
|
||||
checkAll: false,
|
||||
checkAllGroup: ['香蕉', '西瓜']
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Reference in a new issue