完善文档

Former-commit-id: 038ce2bc3c9c34e849e4b12b98b4429ab59df3e2 [formerly 038ce2bc3c9c34e849e4b12b98b4429ab59df3e2 [formerly 038ce2bc3c9c34e849e4b12b98b4429ab59df3e2 [formerly 038ce2bc3c9c34e849e4b12b98b4429ab59df3e2 [formerly d2aba79993f8cf607e0b17d1a5e03a1b44dcba4a [formerly 215dd15e9a6bd24df50bb42b309aa142eb984037]]]]] Former-commit-id: b39a2149ed889e79182ed0276917b0cdb2bcd4e8 Former-commit-id: e78c6c416b345be5d87dbfefa2b3ebc60682e405 Former-commit-id: aa2fcdd5de7e0e23bc4b65d676a65dbaefc98539 [formerly 0dc3ddb6a02f54cf1611b8e52f78fdc107fe56fd] Former-commit-id: 535b581fe45ccb3423c6fc524f4abc6d9a789b31 Former-commit-id: fae09c10ae80de05332332ce1a56aec0cdadb4f2 Former-commit-id: bd9a846c70aec65cb3e934380594fd488df5492d Former-commit-id: aee16b0242f46a4e9f426433ec0d2994f4b80529 Former-commit-id: e49ef6b10a02ab64855ffb6ce1d0a7ec93bd757d
2018-07-22 20:32:25 +08:00
parent e5039f52d8
commit 19d8c9b845
6 changed files with 87 additions and 91 deletions
--- a/docs/zh/components/container.md
+++ b/docs/zh/components/container.md
@@ -1,11 +1,29 @@
 # 页面容器

+::: tip 提示
+`<d2-container>` 是 D2Admin 构建页面最重要的组件，请仔细阅读本文档
+:::
+
 ## 参数

 | 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
 | --- | --- | --- | --- | --- | --- |
-| type | 容器模式 | 非 | string | full card ghost | full |
-| scroll | 使用自定义滚动条 | 非 | boolean |  | false |
+| type | 容器模式 | 非 | String | full card ghost | full |
+| scroll | 使用自定义滚动条 | 非 | Boolean |  | false |
+| scroll-options | 自定义滚动条配置 | 非 | Object | [better-scroll](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | 见下 |
+
+::: tip scroll-options 默认值
+```
+{
+	mouseWheel: true,
+	scrollbar: {
+	  fade: true,
+		interactive: false
+	}
+}
+```
+设置的参数值会和默认值使用 Object.assign 合并，最后在初始化 [better-scroll](https://github.com/ustbhuangyi/better-scroll) 时传入
+:::

 下面的介绍中 **主区域** 范围见下

@@ -275,6 +293,19 @@ ghost 模式适合对页面有定制需求的用户，此模式生成一个没

 ![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_bs_long-slot@2x.png)

+## 如何选择
+
+如果不是纯展示型页面，通常建议不要开启 scroll 属性，除非你可以通过设置 scroll-options 解决你遇到的问题
+
+::: tip 开启 scroll 属性可能会带来的问题
+* 页面文字无法选中
+* 表单控件失灵
+* 拖拽相关操作失灵
+* ...
+
+上述问题理论上都可以通过配置 scroll-options 解决，scroll-options 参数设置的对象在和默认值合并后会作为 [better-scroll](https://github.com/ustbhuangyi/better-scroll) 配置参数传入。D2Admin 暂时只对 [better-scroll](https://github.com/ustbhuangyi/better-scroll) 做了简单设置，如果你遇到了相关问题请 [better-scroll](https://github.com/ustbhuangyi/better-scroll) 相关设置文档
+:::
+
 ## 注

 本文插图为 [@FairyEver](https://github.com/FairyEver) 专为此文档设计，未经授权不得转载或者修改使用
--- a/src/components/core/d2-container/components/d2-container-card-bs.vue
+++ b/src/components/core/d2-container/components/d2-container-card-bs.vue
@@ -17,35 +17,11 @@
 </template>

 <script>
-import BScroll from 'better-scroll'
+import bs from './mixins/bs'
 export default {
  name: 'd2-container-card-bs',
-  data () {
-    return {
-      BS: null
-    }
-  },
-  mounted () {
-    this.scrollInit()
-  },
-  beforeDestroy () {
-    this.scrollDestroy()
-  },
-  methods: {
-    scrollInit () {
-      this.BS = new BScroll(this.$refs.wrapper, {
-        mouseWheel: true,
-        scrollbar: {
-          fade: true,
-          interactive: false
-        }
-      })
-    },
-    scrollDestroy () {
-      if (this.BS) {
-        this.BS.destroy()
-      }
-    }
-  }
+  mixins: [
+    bs
+  ]
 }
 </script>
--- a/src/components/core/d2-container/components/d2-container-full-bs.vue
+++ b/src/components/core/d2-container/components/d2-container-full-bs.vue
@@ -15,35 +15,11 @@
 </template>

 <script>
-import BScroll from 'better-scroll'
+import bs from './mixins/bs'
 export default {
-  name: 'd2-container-full-bs',
-  data () {
-    return {
-      BS: null
-    }
-  },
-  mounted () {
-    this.scrollInit()
-  },
-  beforeDestroy () {
-    this.scrollDestroy()
-  },
-  methods: {
-    scrollInit () {
-      this.BS = new BScroll(this.$refs.wrapper, {
-        mouseWheel: true,
-        scrollbar: {
-          fade: true,
-          interactive: false
-        }
-      })
-    },
-    scrollDestroy () {
-      if (this.BS) {
-        this.BS.destroy()
-      }
-    }
-  }
+  name: 'd2-container-card-bs',
+  mixins: [
+    bs
+  ]
 }
 </script>
--- a/src/components/core/d2-container/components/d2-container-ghost-bs.vue
+++ b/src/components/core/d2-container/components/d2-container-ghost-bs.vue
@@ -13,35 +13,11 @@
 </template>

 <script>
-import BScroll from 'better-scroll'
+import bs from './mixins/bs'
 export default {
-  name: 'd2-container-ghost-bs',
-  data () {
-    return {
-      BS: null
-    }
-  },
-  mounted () {
-    this.scrollInit()
-  },
-  beforeDestroy () {
-    this.scrollDestroy()
-  },
-  methods: {
-    scrollInit () {
-      this.BS = new BScroll(this.$refs.wrapper, {
-        mouseWheel: true,
-        scrollbar: {
-          fade: true,
-          interactive: false
-        }
-      })
-    },
-    scrollDestroy () {
-      if (this.BS) {
-        this.BS.destroy()
-      }
-    }
-  }
+  name: 'd2-container-card-bs',
+  mixins: [
+    bs
+  ]
 }
 </script>
--- a/src/components/core/d2-container/components/mixins/bs.js
+++ b/src/components/core/d2-container/components/mixins/bs.js
@@ -0,0 +1,37 @@
+import BScroll from 'better-scroll'
+export default {
+  props: {
+    scrollOptions: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      BS: null
+    }
+  },
+  mounted () {
+    this.scrollInit()
+  },
+  beforeDestroy () {
+    this.scrollDestroy()
+  },
+  methods: {
+    scrollInit () {
+      this.BS = new BScroll(this.$refs.wrapper, Object.assign({
+        mouseWheel: true,
+        scrollbar: {
+          fade: true,
+          interactive: false
+        }
+      }, this.scrollOptions))
+    },
+    scrollDestroy () {
+      if (this.BS) {
+        this.BS.destroy()
+      }
+    }
+  }
+}
--- a/src/components/core/d2-container/index.vue
+++ b/src/components/core/d2-container/index.vue
@@ -7,7 +7,7 @@
      <slot v-if="$slots.footer" name="footer" slot="footer"/>
    </d2-container-card>
    <!-- [card] 卡片容器 滚动优化 -->
-    <d2-container-card-bs v-if="type === 'card' && scroll">
+    <d2-container-card-bs v-bind="$attrs" v-if="type === 'card' && scroll">
      <slot v-if="$slots.header" name="header" slot="header"/>
      <slot/>
      <slot v-if="$slots.footer" name="footer" slot="footer"/>
@@ -19,7 +19,7 @@
      <slot v-if="$slots.footer" name="footer" slot="footer"/>
    </d2-container-ghost>
    <!-- [ghost] 隐形容器 滚动优化 -->
-    <d2-container-ghost-bs v-if="type === 'ghost' && scroll">
+    <d2-container-ghost-bs v-bind="$attrs" v-if="type === 'ghost' && scroll">
      <slot v-if="$slots.header" name="header" slot="header"/>
      <slot/>
      <slot v-if="$slots.footer" name="footer" slot="footer"/>
@@ -31,7 +31,7 @@
      <slot v-if="$slots.footer" name="footer" slot="footer"/>
    </d2-container-full>
    <!-- [container-full-bs] 填充 滚动优化 -->
-    <d2-container-full-bs v-if="type === 'full' && scroll">
+    <d2-container-full-bs v-bind="$attrs" v-if="type === 'full' && scroll">
      <slot v-if="$slots.header" name="header" slot="header"/>
      <slot/>
      <slot v-if="$slots.footer" name="footer" slot="footer"/>