chenhaodong / mew-iview

Commit 1deb706a26b61d7e9ab87d75bebc62ee295135ec

Authored by Aresn
Committed by GitHub
2 parents a00e989b 1f7c24bc

Merge pull request #3205 from lison16/2.0 

fixed https://github.com/iview/iview/issues/3186#issuecomment-374889171
Showing 2 changed files with 21 additions and 16 deletions   Show diff stats
Inline Side-by-side
examples/routers/layout.vue
  Show/Hide comments   View file @1deb706
1 <template> 1 <template>
2 <div class="layout-demo-con"> 2 <div class="layout-demo-con">
  3 + <Button @click="change">修改Sider绑定的变量来控制收缩</Button>
3 <Layout :style="{minHeight: '100vh'}"> 4 <Layout :style="{minHeight: '100vh'}">
4 <Sider 5 <Sider
5 v-model="isCollapsed" 6 v-model="isCollapsed"
6 collapsed-width="0" 7 collapsed-width="0"
7 hide-trigger 8 hide-trigger
  9 + breakpoint="sm"
  10 + @on-collapse="changed"
8 collapsible 11 collapsible
9 ref="side" 12 ref="side"
10 width="200"> 13 width="200">
@@ -52,6 +55,12 @@ export default { @@ -52,6 +55,12 @@ export default {
52 methods: { 55 methods: {
53 toggleCollapse () { 56 toggleCollapse () {
54 this.$refs.side.toggleCollapse(); 57 this.$refs.side.toggleCollapse();
  58 + },
  59 + change () {
  60 + this.isCollapsed = !this.isCollapsed;
  61 + },
  62 + changed (res) {
  63 + console.log(res)
55 } 64 }
56 }, 65 },
57 watch: { 66 watch: {
src/components/layout/sider.vue
  Show/Hide comments   View file @1deb706
@@ -61,8 +61,7 @@ @@ -61,8 +61,7 @@
61 data () { 61 data () {
62 return { 62 return {
63 prefixCls: prefixCls, 63 prefixCls: prefixCls,
64 - mediaMatched: false,  
65 - isCollapsed: false 64 + mediaMatched: false
66 }; 65 };
67 }, 66 },
68 computed: { 67 computed: {
@@ -70,7 +69,7 @@ @@ -70,7 +69,7 @@
70 return [ 69 return [
71 `${prefixCls}`, 70 `${prefixCls}`,
72 this.siderWidth ? '' : `${prefixCls}-zero-width`, 71 this.siderWidth ? '' : `${prefixCls}-zero-width`,
73 - this.isCollapsed ? `${prefixCls}-collapsed` : '' 72 + this.value ? `${prefixCls}-collapsed` : ''
74 ]; 73 ];
75 }, 74 },
76 wrapStyles () { 75 wrapStyles () {
@@ -84,7 +83,7 @@ @@ -84,7 +83,7 @@
84 triggerClasses () { 83 triggerClasses () {
85 return [ 84 return [
86 `${prefixCls}-trigger`, 85 `${prefixCls}-trigger`,
87 - this.isCollapsed ? `${prefixCls}-trigger-collapsed` : '', 86 + this.value ? `${prefixCls}-trigger-collapsed` : '',
88 ]; 87 ];
89 }, 88 },
90 childClasses () { 89 childClasses () {
@@ -104,10 +103,10 @@ @@ -104,10 +103,10 @@
104 ]; 103 ];
105 }, 104 },
106 siderWidth () { 105 siderWidth () {
107 - return this.collapsible ? (this.isCollapsed ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width)) : this.width; 106 + return this.collapsible ? (this.value ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width)) : this.width;
108 }, 107 },
109 showZeroTrigger () { 108 showZeroTrigger () {
110 - return this.collapsible ? (this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.isCollapsed && !this.hideTrigger) : false; 109 + return this.collapsible ? (this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.value && !this.hideTrigger) : false;
111 }, 110 },
112 showBottomTrigger () { 111 showBottomTrigger () {
113 return this.collapsible ? !this.mediaMatched && !this.hideTrigger : false; 112 return this.collapsible ? !this.mediaMatched && !this.hideTrigger : false;
@@ -115,9 +114,8 @@ @@ -115,9 +114,8 @@
115 }, 114 },
116 methods: { 115 methods: {
117 toggleCollapse () { 116 toggleCollapse () {
118 - this.isCollapsed = this.collapsible ? !this.isCollapsed : false;  
119 - this.$emit('input', this.isCollapsed);  
120 - this.$emit('on-collapse', this.isCollapsed); 117 + let value = this.collapsible ? !this.value : false;
  118 + this.$emit('input', value);
121 }, 119 },
122 matchMedia () { 120 matchMedia () {
123 let matchMedia; 121 let matchMedia;
@@ -128,23 +126,21 @@ @@ -128,23 +126,21 @@
128 this.mediaMatched = matchMedia(`(max-width: ${dimensionMap[this.breakpoint]})`).matches; 126 this.mediaMatched = matchMedia(`(max-width: ${dimensionMap[this.breakpoint]})`).matches;
129 127
130 if (this.mediaMatched !== mediaMatched) { 128 if (this.mediaMatched !== mediaMatched) {
131 - this.isCollapsed = this.collapsible ? this.mediaMatched : false;  
132 this.$emit('input', this.mediaMatched); 129 this.$emit('input', this.mediaMatched);
133 - this.$emit('on-collapse', this.mediaMatched);  
134 } 130 }
135 }, 131 },
136 onWindowResize () { 132 onWindowResize () {
137 this.matchMedia(); 133 this.matchMedia();
138 } 134 }
139 }, 135 },
  136 + watch: {
  137 + value (stat) {
  138 + this.$emit('on-collapse', stat);
  139 + }
  140 + },
140 mounted () { 141 mounted () {
141 if (this.defaultCollapsed) { 142 if (this.defaultCollapsed) {
142 - this.isCollapsed = true;  
143 this.$emit('input', this.defaultCollapsed); 143 this.$emit('input', this.defaultCollapsed);
144 - } else {  
145 - if (this.value !== undefined) {  
146 - this.isCollapsed = this.value;  
147 - }  
148 } 144 }
149 if (this.breakpoint !== undefined) { 145 if (this.breakpoint !== undefined) {
150 on(window, 'resize', this.onWindowResize); 146 on(window, 'resize', this.onWindowResize);