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

fixed https://github.com/iview/iview/issues/3186#issuecomment-374889171

Browse source
This commit is contained in:
zhigang.li 2018-03-21 19:20:01 +08:00
parent a00e989ba3
commit 1f7c24bcb7
2 changed files with 21 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
examples/routers/layout.vue
View file

@ -1,10 +1,13 @@
<template>
<div class="layout-demo-con">
<Button @click="change">修改Sider绑定的变量来控制收缩</Button>
<Layout :style="{minHeight: '100vh'}">
<Sider
v-model="isCollapsed"
collapsed-width="0"
hide-trigger
breakpoint="sm"
@on-collapse="changed"
collapsible
ref="side"
width="200">
@ -52,6 +55,12 @@ export default {
methods: {
toggleCollapse () {
this.$refs.side.toggleCollapse();
},
change () {
this.isCollapsed = !this.isCollapsed;
},
changed (res) {
console.log(res)
}
},
watch: {

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

@ -61,8 +61,7 @@
data () {
return {
prefixCls: prefixCls,
mediaMatched: false,
isCollapsed: false
mediaMatched: false
};
},
computed: {
@ -70,7 +69,7 @@
return [
`${prefixCls}`,
this.siderWidth ? '' : `${prefixCls}-zero-width`,
this.isCollapsed ? `${prefixCls}-collapsed` : ''
this.value ? `${prefixCls}-collapsed` : ''
];
},
wrapStyles () {
@ -84,7 +83,7 @@
triggerClasses () {
return [
`${prefixCls}-trigger`,
this.isCollapsed ? `${prefixCls}-trigger-collapsed` : '',
this.value ? `${prefixCls}-trigger-collapsed` : '',
];
},
childClasses () {
@ -104,10 +103,10 @@
];
},
siderWidth () {
return this.collapsible ? (this.isCollapsed ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width)) : this.width;
return this.collapsible ? (this.value ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width)) : this.width;
},
showZeroTrigger () {
return this.collapsible ? (this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.isCollapsed && !this.hideTrigger) : false;
return this.collapsible ? (this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.value && !this.hideTrigger) : false;
},
showBottomTrigger () {
return this.collapsible ? !this.mediaMatched && !this.hideTrigger : false;
@ -115,9 +114,8 @@
},
methods: {
toggleCollapse () {
this.isCollapsed = this.collapsible ? !this.isCollapsed : false;
this.$emit('input', this.isCollapsed);
this.$emit('on-collapse', this.isCollapsed);
let value = this.collapsible ? !this.value : false;
this.$emit('input', value);
},
matchMedia () {
let matchMedia;
@ -128,23 +126,21 @@
this.mediaMatched = matchMedia(`(max-width: ${dimensionMap[this.breakpoint]})`).matches;
if (this.mediaMatched !== mediaMatched) {
this.isCollapsed = this.collapsible ? this.mediaMatched : false;
this.$emit('input', this.mediaMatched);
this.$emit('on-collapse', this.mediaMatched);
}
},
onWindowResize () {
this.matchMedia();
}
},
watch: {
value (stat) {
this.$emit('on-collapse', stat);
}
},
mounted () {
if (this.defaultCollapsed) {
this.isCollapsed = true;
this.$emit('input', this.defaultCollapsed);
} else {
if (this.value !== undefined) {
this.isCollapsed = this.value;
}
}
if (this.breakpoint !== undefined) {
on(window, 'resize', this.onWindowResize);