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 4 <Sider
5 5 v-model="isCollapsed"
6 6 collapsed-width="0"
  7 + hide-trigger
7 8 collapsible
8 9 ref="side"
9 10 width="200">
... ... @@ -29,6 +30,7 @@
29 30 </MenuItem>
30 31 </MenuGroup>
31 32 </Menu>
  33 + <!-- <div slot="trigger"><Icon type="document-text"></Icon></div> -->
32 34 </Sider>
33 35 <Layout class-name="test-class">
34 36 <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">่œๅ•</Button></Header>
... ... @@ -51,6 +53,11 @@ export default {
51 53 toggleCollapse () {
52 54 this.$refs.side.toggleCollapse();
53 55 }
  56 + },
  57 + watch: {
  58 + isCollapsed (val) {
  59 + // console.log(val)
  60 + }
54 61 }
55 62 };
56 63 </script>
... ...
src/components/layout/sider.vue
  Show/Hide comments   View file @baa75b0
... ... @@ -8,9 +8,11 @@
8 8 <div :class="childClasses">
9 9 <slot></slot>
10 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 16 </div>
15 17 </template>
16 18 <script>
... ... @@ -39,7 +41,6 @@
39 41 },
40 42 breakpoint: {
41 43 type: String,
42   - default: 'md',
43 44 validator (val) {
44 45 return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl']);
45 46 }
... ... @@ -115,8 +116,8 @@
115 116 methods: {
116 117 toggleCollapse () {
117 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 122 matchMedia () {
122 123 let matchMedia;
... ... @@ -137,15 +138,23 @@
137 138 }
138 139 },
139 140 mounted () {
140   - on(window, 'resize', this.onWindowResize);
141   - this.matchMedia();
142   - this.$emit('input', this.defaultCollapsed);
143 141 if (this.defaultCollapsed) {
144 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 160 </script>
152 161 \ No newline at end of file
... ...