replay class attr which using inline styles with computed props

zhigang.li
1 parent 1c26d05c
Showing 1 changed file with 16 additions and 2 deletions Show diff stats
src/components/layout/sider.vue
 <template>
     <div 
         :class="wrapClasses" 
-        :style="{width: siderWidth + 'px', minWidth: siderWidth + 'px', maxWidth: siderWidth + 'px', flex: '0 0 ' + siderWidth + 'px'}">
+        :style="wrapStyles">
         <span v-show="showZeroTrigger" @click="toggleCollapse" :class="zeroWidthTriggerClasses">
             <i class="ivu-icon ivu-icon-navicon-round"></i>
         </span>
-        <div :class="`${prefixCls}-children`">
+        <div :class="childClasses">
             <slot></slot>
         </div>
         <div v-show="showBottomTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
@@ -72,12 +72,23 @@
                     this.isCollapsed ? `${prefixCls}-collapsed` : ''
                 ];
             },
+            wrapStyles () {
+                return {
+                    width: `${this.siderWidth}px`,
+                    minWidth: `${this.siderWidth}px`,
+                    maxWidth: `${this.siderWidth}px`,
+                    flex: `0 0 ${this.siderWidth}px`
+                };
+            },
             triggerClasses () {
                 return [
                     `${prefixCls}-trigger`,
                     this.isCollapsed ? `${prefixCls}-trigger-collapsed` : '',
                 ];
             },
+            childClasses () {
+                return `${this.prefixCls}-children`;
+            },
             zeroWidthTriggerClasses () {
                 return [
                     `${prefixCls}-zero-width-trigger`,
@@ -129,6 +140,9 @@
             on(window, 'resize', this.onWindowResize);
             this.matchMedia();
             this.$emit('input', this.defaultCollapsed);
+            if (this.defaultCollapsed) {
+                this.isCollapsed = true;
+            }
         },
         destroyed () {
             off(window, 'resize', this.onWindowResize);