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

fixed bug about sider

Browse source
This commit is contained in:
zhigang.li 2017-12-19 20:42:15 +08:00
parent f07aafb717
commit 47ea7cc216
1 changed files with 11 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/layout/sider.vue
View file

@ -56,7 +56,8 @@
data () { data () {
return { return {
prefixCls: prefixCls, prefixCls: prefixCls,
mediaMatched: false mediaMatched: false,
isCollapsed: false
}; };
}, },
computed: { computed: {
@ -64,13 +65,13 @@
return [ return [
`${prefixCls}`, `${prefixCls}`,
this.siderWidth ? '' : `${prefixCls}-zero-width`, this.siderWidth ? '' : `${prefixCls}-zero-width`,
this.value ? `${prefixCls}-collapsed` : '' this.isCollapsed ? `${prefixCls}-collapsed` : ''
]; ];
}, },
triggerClasses () { triggerClasses () {
return [ return [
`${prefixCls}-trigger`, `${prefixCls}-trigger`,
this.value ? `${prefixCls}-trigger-collapsed` : '', this.isCollapsed ? `${prefixCls}-trigger-collapsed` : '',
]; ];
}, },
zeroWidthTriggerClasses () { zeroWidthTriggerClasses () {
@ -87,16 +88,17 @@
]; ];
}, },
siderWidth () { siderWidth () {
return this.value ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width); return this.isCollapsed ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width);
}, },
showZeroTrigger () { showZeroTrigger () {
return this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.value && !this.hideTrigger; return this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.isCollapsed && !this.hideTrigger;
} }
}, },
methods: { methods: {
toggleCollapse () { toggleCollapse () {
this.$emit('input', !this.value); this.isCollapsed = !this.isCollapsed;
this.$emit('on-collapse', !this.value); this.$emit('input', !this.isCollapsed);
this.$emit('on-collapse', !this.isCollapsed);
}, },
matchMedia () { matchMedia () {
let matchMedia; let matchMedia;
@ -105,7 +107,9 @@
} }
let mediaMatched = this.mediaMatched; let mediaMatched = this.mediaMatched;
this.mediaMatched = matchMedia(`(max-width: ${dimensionMap[this.breakpoint]})`).matches; this.mediaMatched = matchMedia(`(max-width: ${dimensionMap[this.breakpoint]})`).matches;
if (this.mediaMatched !== mediaMatched) { if (this.mediaMatched !== mediaMatched) {
this.isCollapsed = this.mediaMatched;
this.$emit('input', this.mediaMatched); this.$emit('input', this.mediaMatched);
this.$emit('on-collapse', this.mediaMatched); this.$emit('on-collapse', this.mediaMatched);
} }