other / mew-iview

Commit 1c26d05c3139d8bbcdeb643ef4648e35789a06d5

Authored by zhigang.li
1 parent 47ea7cc2

add 'collapsible' props for sider

Showing 2 changed files with 13 additions and 5 deletions   Show diff stats
Inline Side-by-side
examples/routers/layout.vue
  Show/Hide comments   View file @1c26d05
... ... @@ -4,6 +4,7 @@
4 4 <Sider
5 5 v-model="isCollapsed"
6 6 collapsed-width="0"
  7 + collapsible
7 8 ref="side"
8 9 width="200">
9 10 <Menu width="auto" theme="dark" active-name="1">
... ...
src/components/layout/sider.vue
  Show/Hide comments   View file @1c26d05
... ... @@ -8,7 +8,7 @@
8 8 <div :class="`${prefixCls}-children`">
9 9 <slot></slot>
10 10 </div>
11   - <div v-show="!mediaMatched && !hideTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
  11 + <div v-show="showBottomTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
12 12 <i :class="triggerIconClasses"></i>
13 13 </div>
14 14 </div>
... ... @@ -44,6 +44,10 @@
44 44 return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl']);
45 45 }
46 46 },
  47 + collapsible: {
  48 + type: Boolean,
  49 + default: false
  50 + },
47 51 defaultCollapsed: {
48 52 type: Boolean,
49 53 default: false
... ... @@ -88,15 +92,18 @@
88 92 ];
89 93 },
90 94 siderWidth () {
91   - return this.isCollapsed ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width);
  95 + return this.collapsible ? (this.isCollapsed ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width)) : this.width;
92 96 },
93 97 showZeroTrigger () {
94   - return this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.isCollapsed && !this.hideTrigger;
  98 + return this.collapsible ? (this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.isCollapsed && !this.hideTrigger) : false;
  99 + },
  100 + showBottomTrigger () {
  101 + return this.collapsible ? !this.mediaMatched && !this.hideTrigger : false;
95 102 }
96 103 },
97 104 methods: {
98 105 toggleCollapse () {
99   - this.isCollapsed = !this.isCollapsed;
  106 + this.isCollapsed = this.collapsible ? !this.isCollapsed : false;
100 107 this.$emit('input', !this.isCollapsed);
101 108 this.$emit('on-collapse', !this.isCollapsed);
102 109 },
... ... @@ -109,7 +116,7 @@
109 116 this.mediaMatched = matchMedia(`(max-width: ${dimensionMap[this.breakpoint]})`).matches;
110 117  
111 118 if (this.mediaMatched !== mediaMatched) {
112   - this.isCollapsed = this.mediaMatched;
  119 + this.isCollapsed = this.collapsible ? this.mediaMatched : false;
113 120 this.$emit('input', this.mediaMatched);
114 121 this.$emit('on-collapse', this.mediaMatched);
115 122 }
... ...