From 19d8c9b845a08bd559123be23be7fcc31c88cb12 Mon Sep 17 00:00:00 2001 From: liyang <1711467488@qq.com> Date: Sun, 22 Jul 2018 20:32:25 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- docs/zh/components/container.md | 35 +++++++++++++++++- .../components/d2-container-card-bs.vue | 32 ++-------------- .../components/d2-container-full-bs.vue | 34 +++-------------- .../components/d2-container-ghost-bs.vue | 34 +++-------------- .../core/d2-container/components/mixins/bs.js | 37 +++++++++++++++++++ src/components/core/d2-container/index.vue | 6 +-- 6 files changed, 87 insertions(+), 91 deletions(-) create mode 100644 src/components/core/d2-container/components/mixins/bs.js diff --git a/docs/zh/components/container.md b/docs/zh/components/container.md index 36583a16..d42e727d 100644 --- a/docs/zh/components/container.md +++ b/docs/zh/components/container.md @@ -1,11 +1,29 @@ # 页面容器 +::: tip 提示 +`` 是 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) 专为此文档设计，未经授权不得转载或者修改使用 diff --git a/src/components/core/d2-container/components/d2-container-card-bs.vue b/src/components/core/d2-container/components/d2-container-card-bs.vue index f3194269..3ee538c2 100644 --- 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 @@ diff --git a/src/components/core/d2-container/components/d2-container-full-bs.vue b/src/components/core/d2-container/components/d2-container-full-bs.vue index f43e289d..dc344c8c 100644 --- 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 @@ diff --git a/src/components/core/d2-container/components/d2-container-ghost-bs.vue b/src/components/core/d2-container/components/d2-container-ghost-bs.vue index edc324be..93ca21c1 100644 --- 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 @@ diff --git a/src/components/core/d2-container/components/mixins/bs.js b/src/components/core/d2-container/components/mixins/bs.js new file mode 100644 index 00000000..caa00be2 --- /dev/null +++ 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() + } + } + } +} diff --git a/src/components/core/d2-container/index.vue b/src/components/core/d2-container/index.vue index be4cf3b4..e00e826d 100644 --- a/src/components/core/d2-container/index.vue +++ b/src/components/core/d2-container/index.vue @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -31,7 +31,7 @@ - +