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