Merge pull request #521 from DaoCloud/fix/setting-layout-v-show-issue

fix(setting-layout): 修复 v-show 对 setting-layout 不起作用的问题
DaoCloud · Jul 25, 2018 · 56c7bda · 56c7bda
2 parents b92e810 + 13a97ad
commit 56c7bda
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/examples/routers/setting-layout.vue b/examples/routers/setting-layout.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <button class="dao-btn blue" @click="show = !show">切换 Layout</button>
-    <dao-setting-layout v-if="show">
+    <dao-setting-layout v-if="show" class="test-class">
       <template slot="layout-title">大标题</template>
       <template slot="layout-title-helper">大标题一定要有，表单必有头</template>
       <dao-setting-section>
@@ -66,13 +66,15 @@
 </template>
 <script>
 export default {
-  data () {
+  data() {
     return {
       show: true,
     };
   },
 };
 </script>
 <style lang="scss">
-  
+  .test-class {
+    color: red;
+  }
 </style>
diff --git a/src/components/dao-setting-layout/dao-setting-layout.js b/src/components/dao-setting-layout/dao-setting-layout.js
@@ -29,7 +29,13 @@ export default {
         footerSlot,
       ]) : '';
 
-    return h('div', { class: 'dao-setting-layout' }, [
+    return h('div', {
+      ...context.data,
+      // 此处不用 `class: 'dao-setting-layout'` 的原因为：
+      // dao-setting-layout 这个类会覆盖外部传入的动态绑定 class
+      // 导致在组件外部传入 :class="['testClass']" 类似用法会失效
+      staticClass: `dao-setting-layout ${context.data.staticClass}`,
+    }, [
       LayoutTitle, defaultSlot, Footer,
     ]);
   },