other / mew-iview

Commit baa75b0aefa8fb2cdcc4bc9dda8671f6fa24c915

Authored by Aresn
Committed by GitHub
2 parents c6336ce4 c2d603d0

Merge pull request #2668 from lison16/layout 

update Layout
Showing 2 changed files with 27 additions and 11 deletions   Show diff stats
Inline Side-by-side
examples/routers/layout.vue
  Show/Hide comments   View file @baa75b0
@@ -4,6 +4,7 @@ @@ -4,6 +4,7 @@
4 <Sider 4 <Sider
5 v-model="isCollapsed" 5 v-model="isCollapsed"
6 collapsed-width="0" 6 collapsed-width="0"
  7 + hide-trigger
7 collapsible 8 collapsible
8 ref="side" 9 ref="side"
9 width="200"> 10 width="200">
@@ -29,6 +30,7 @@ @@ -29,6 +30,7 @@
29 </MenuItem> 30 </MenuItem>
30 </MenuGroup> 31 </MenuGroup>
31 </Menu> 32 </Menu>
  33 + <!-- <div slot="trigger"><Icon type="document-text"></Icon></div> -->
32 </Sider> 34 </Sider>
33 <Layout class-name="test-class"> 35 <Layout class-name="test-class">
34 <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header> 36 <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
@@ -51,6 +53,11 @@ export default { @@ -51,6 +53,11 @@ export default {
51 toggleCollapse () { 53 toggleCollapse () {
52 this.$refs.side.toggleCollapse(); 54 this.$refs.side.toggleCollapse();
53 } 55 }
  56 + },
  57 + watch: {
  58 + isCollapsed (val) {
  59 + // console.log(val)
  60 + }
54 } 61 }
55 }; 62 };
56 </script> 63 </script>
src/components/layout/sider.vue
  Show/Hide comments   View file @baa75b0
@@ -8,9 +8,11 @@ @@ -8,9 +8,11 @@
8 <div :class="childClasses"> 8 <div :class="childClasses">
9 <slot></slot> 9 <slot></slot>
10 </div> 10 </div>
11 - <div v-show="showBottomTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">  
12 - <i :class="triggerIconClasses"></i>  
13 - </div> 11 + <slot name="trigger">
  12 + <div v-show="showBottomTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
  13 + <i :class="triggerIconClasses"></i>
  14 + </div>
  15 + </slot>
14 </div> 16 </div>
15 </template> 17 </template>
16 <script> 18 <script>
@@ -39,7 +41,6 @@ @@ -39,7 +41,6 @@
39 }, 41 },
40 breakpoint: { 42 breakpoint: {
41 type: String, 43 type: String,
42 - default: 'md',  
43 validator (val) { 44 validator (val) {
44 return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl']); 45 return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl']);
45 } 46 }
@@ -115,8 +116,8 @@ @@ -115,8 +116,8 @@
115 methods: { 116 methods: {
116 toggleCollapse () { 117 toggleCollapse () {
117 this.isCollapsed = this.collapsible ? !this.isCollapsed : false; 118 this.isCollapsed = this.collapsible ? !this.isCollapsed : false;
118 - this.$emit('input', !this.isCollapsed);  
119 - this.$emit('on-collapse', !this.isCollapsed); 119 + this.$emit('input', this.isCollapsed);
  120 + this.$emit('on-collapse', this.isCollapsed);
120 }, 121 },
121 matchMedia () { 122 matchMedia () {
122 let matchMedia; 123 let matchMedia;
@@ -137,15 +138,23 @@ @@ -137,15 +138,23 @@
137 } 138 }
138 }, 139 },
139 mounted () { 140 mounted () {
140 - on(window, 'resize', this.onWindowResize);  
141 - this.matchMedia();  
142 - this.$emit('input', this.defaultCollapsed);  
143 if (this.defaultCollapsed) { 141 if (this.defaultCollapsed) {
144 this.isCollapsed = true; 142 this.isCollapsed = true;
  143 + this.$emit('input', this.defaultCollapsed);
  144 + } else {
  145 + if (this.value !== undefined) {
  146 + this.isCollapsed = this.value;
  147 + }
  148 + }
  149 + if (this.breakpoint !== undefined) {
  150 + on(window, 'resize', this.onWindowResize);
  151 + this.matchMedia();
145 } 152 }
146 }, 153 },
147 - destroyed () {  
148 - off(window, 'resize', this.onWindowResize); 154 + beforeDestroy () {
  155 + if (this.breakpoint !== undefined) {
  156 + off(window, 'resize', this.onWindowResize);
  157 + }
149 } 158 }
150 }; 159 };
151 </script> 160 </script>
152 \ No newline at end of file 161 \ No newline at end of file