Commit 47ea7cc21635b33ab43269879bf751d7979a07b9
1 parent
f07aafb7
fixed bug about sider
Showing
1 changed file
with
11 additions
and
7 deletions
Show diff stats
src/components/layout/sider.vue
| ... | ... | @@ -56,7 +56,8 @@ |
| 56 | 56 | data () { |
| 57 | 57 | return { |
| 58 | 58 | prefixCls: prefixCls, |
| 59 | - mediaMatched: false | |
| 59 | + mediaMatched: false, | |
| 60 | + isCollapsed: false | |
| 60 | 61 | }; |
| 61 | 62 | }, |
| 62 | 63 | computed: { |
| ... | ... | @@ -64,13 +65,13 @@ |
| 64 | 65 | return [ |
| 65 | 66 | `${prefixCls}`, |
| 66 | 67 | this.siderWidth ? '' : `${prefixCls}-zero-width`, |
| 67 | - this.value ? `${prefixCls}-collapsed` : '' | |
| 68 | + this.isCollapsed ? `${prefixCls}-collapsed` : '' | |
| 68 | 69 | ]; |
| 69 | 70 | }, |
| 70 | 71 | triggerClasses () { |
| 71 | 72 | return [ |
| 72 | 73 | `${prefixCls}-trigger`, |
| 73 | - this.value ? `${prefixCls}-trigger-collapsed` : '', | |
| 74 | + this.isCollapsed ? `${prefixCls}-trigger-collapsed` : '', | |
| 74 | 75 | ]; |
| 75 | 76 | }, |
| 76 | 77 | zeroWidthTriggerClasses () { |
| ... | ... | @@ -87,16 +88,17 @@ |
| 87 | 88 | ]; |
| 88 | 89 | }, |
| 89 | 90 | siderWidth () { |
| 90 | - return this.value ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width); | |
| 91 | + return this.isCollapsed ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width); | |
| 91 | 92 | }, |
| 92 | 93 | showZeroTrigger () { |
| 93 | - return this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.value && !this.hideTrigger; | |
| 94 | + return this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.isCollapsed && !this.hideTrigger; | |
| 94 | 95 | } |
| 95 | 96 | }, |
| 96 | 97 | methods: { |
| 97 | 98 | toggleCollapse () { |
| 98 | - this.$emit('input', !this.value); | |
| 99 | - this.$emit('on-collapse', !this.value); | |
| 99 | + this.isCollapsed = !this.isCollapsed; | |
| 100 | + this.$emit('input', !this.isCollapsed); | |
| 101 | + this.$emit('on-collapse', !this.isCollapsed); | |
| 100 | 102 | }, |
| 101 | 103 | matchMedia () { |
| 102 | 104 | let matchMedia; |
| ... | ... | @@ -105,7 +107,9 @@ |
| 105 | 107 | } |
| 106 | 108 | let mediaMatched = this.mediaMatched; |
| 107 | 109 | this.mediaMatched = matchMedia(`(max-width: ${dimensionMap[this.breakpoint]})`).matches; |
| 110 | + | |
| 108 | 111 | if (this.mediaMatched !== mediaMatched) { |
| 112 | + this.isCollapsed = this.mediaMatched; | |
| 109 | 113 | this.$emit('input', this.mediaMatched); |
| 110 | 114 | this.$emit('on-collapse', this.mediaMatched); |
| 111 | 115 | } | ... | ... |