drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make it will not collapse when didn't set 'breakpoint'

Browse source
This commit is contained in:
zhigang.li 2017-12-20 18:55:25 +08:00
parent ad74efbc83
commit 716d151a78
2 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
examples/routers/layout.vue
View file

@ -4,6 +4,7 @@
<Sider
v-model="isCollapsed"
collapsed-width="0"
hide-trigger
collapsible
ref="side"
width="200">
@ -29,6 +30,7 @@
</MenuItem>
</MenuGroup>
</Menu>
<!-- <div slot="trigger"><Icon type="document-text"></Icon></div> -->
</Sider>
<Layout class-name="test-class">
<Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
@ -51,6 +53,11 @@ export default {
toggleCollapse () {
this.$refs.side.toggleCollapse();
}
},
watch: {
isCollapsed (val) {
// console.log(val)
}
}
};
</script>

19
src/components/layout/sider.vue
View file

@ -8,9 +8,11 @@
<div :class="childClasses">
<slot></slot>
</div>
<div v-show="showBottomTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
<i :class="triggerIconClasses"></i>
</div>
<slot name="trigger">
<div v-show="showBottomTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
<i :class="triggerIconClasses"></i>
</div>
</slot>
</div>
</template>
<script>
@ -39,7 +41,6 @@
},
breakpoint: {
type: String,
default: 'md',
validator (val) {
return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl']);
}
@ -145,11 +146,15 @@
this.isCollapsed = this.value;
}
}
on(window, 'resize', this.onWindowResize);
this.matchMedia();
if (this.breakpoint !== undefined) {
on(window, 'resize', this.onWindowResize);
this.matchMedia();
}
},
destroyed () {
off(window, 'resize', this.onWindowResize);
if (this.breakpoint !== undefined) {
off(window, 'resize', this.onWindowResize);
}
}
};
</script>