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,7 +56,8 @@ | ||
| 56 | data () { | 56 | data () { |
| 57 | return { | 57 | return { |
| 58 | prefixCls: prefixCls, | 58 | prefixCls: prefixCls, |
| 59 | - mediaMatched: false | 59 | + mediaMatched: false, |
| 60 | + isCollapsed: false | ||
| 60 | }; | 61 | }; |
| 61 | }, | 62 | }, |
| 62 | computed: { | 63 | computed: { |
| @@ -64,13 +65,13 @@ | @@ -64,13 +65,13 @@ | ||
| 64 | return [ | 65 | return [ |
| 65 | `${prefixCls}`, | 66 | `${prefixCls}`, |
| 66 | this.siderWidth ? '' : `${prefixCls}-zero-width`, | 67 | this.siderWidth ? '' : `${prefixCls}-zero-width`, |
| 67 | - this.value ? `${prefixCls}-collapsed` : '' | 68 | + this.isCollapsed ? `${prefixCls}-collapsed` : '' |
| 68 | ]; | 69 | ]; |
| 69 | }, | 70 | }, |
| 70 | triggerClasses () { | 71 | triggerClasses () { |
| 71 | return [ | 72 | return [ |
| 72 | `${prefixCls}-trigger`, | 73 | `${prefixCls}-trigger`, |
| 73 | - this.value ? `${prefixCls}-trigger-collapsed` : '', | 74 | + this.isCollapsed ? `${prefixCls}-trigger-collapsed` : '', |
| 74 | ]; | 75 | ]; |
| 75 | }, | 76 | }, |
| 76 | zeroWidthTriggerClasses () { | 77 | zeroWidthTriggerClasses () { |
| @@ -87,16 +88,17 @@ | @@ -87,16 +88,17 @@ | ||
| 87 | ]; | 88 | ]; |
| 88 | }, | 89 | }, |
| 89 | siderWidth () { | 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 | showZeroTrigger () { | 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 | methods: { | 97 | methods: { |
| 97 | toggleCollapse () { | 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 | matchMedia () { | 103 | matchMedia () { |
| 102 | let matchMedia; | 104 | let matchMedia; |
| @@ -105,7 +107,9 @@ | @@ -105,7 +107,9 @@ | ||
| 105 | } | 107 | } |
| 106 | let mediaMatched = this.mediaMatched; | 108 | let mediaMatched = this.mediaMatched; |
| 107 | this.mediaMatched = matchMedia(`(max-width: ${dimensionMap[this.breakpoint]})`).matches; | 109 | this.mediaMatched = matchMedia(`(max-width: ${dimensionMap[this.breakpoint]})`).matches; |
| 110 | + | ||
| 108 | if (this.mediaMatched !== mediaMatched) { | 111 | if (this.mediaMatched !== mediaMatched) { |
| 112 | + this.isCollapsed = this.mediaMatched; | ||
| 109 | this.$emit('input', this.mediaMatched); | 113 | this.$emit('input', this.mediaMatched); |
| 110 | this.$emit('on-collapse', this.mediaMatched); | 114 | this.$emit('on-collapse', this.mediaMatched); |
| 111 | } | 115 | } |