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

add 'collapsible' props for sider

Browse source
This commit is contained in:
zhigang.li 2017-12-19 20:51:15 +08:00
parent 47ea7cc216
commit 1c26d05c31
2 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
examples/routers/layout.vue
View file

@ -4,6 +4,7 @@
<Sider
v-model="isCollapsed"
collapsed-width="0"
collapsible
ref="side"
width="200">
<Menu width="auto" theme="dark" active-name="1">

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

@ -8,7 +8,7 @@
<div :class="`${prefixCls}-children`">
<slot></slot>
</div>
<div v-show="!mediaMatched && !hideTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
<div v-show="showBottomTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
<i :class="triggerIconClasses"></i>
</div>
</div>
@ -44,6 +44,10 @@
return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl']);
}
},
collapsible: {
type: Boolean,
default: false
},
defaultCollapsed: {
type: Boolean,
default: false
@ -88,15 +92,18 @@
];
},
siderWidth () {
return this.isCollapsed ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width);
return this.collapsible ? (this.isCollapsed ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width)) : this.width;
},
showZeroTrigger () {
return this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.isCollapsed && !this.hideTrigger;
return this.collapsible ? (this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.isCollapsed && !this.hideTrigger) : false;
},
showBottomTrigger () {
return this.collapsible ? !this.mediaMatched && !this.hideTrigger : false;
}
},
methods: {
toggleCollapse () {
this.isCollapsed = !this.isCollapsed;
this.isCollapsed = this.collapsible ? !this.isCollapsed : false;
this.$emit('input', !this.isCollapsed);
this.$emit('on-collapse', !this.isCollapsed);
},
@ -109,7 +116,7 @@
this.mediaMatched = matchMedia(`(max-width: ${dimensionMap[this.breakpoint]})`).matches;
if (this.mediaMatched !== mediaMatched) {
this.isCollapsed = this.mediaMatched;
this.isCollapsed = this.collapsible ? this.mediaMatched : false;
this.$emit('input', this.mediaMatched);
this.$emit('on-collapse', this.mediaMatched);
}