From 3d3b832966a4fa234c32c9d38884c039be74cfad Mon Sep 17 00:00:00 2001 From: liyang <1711467488@qq.com> Date: Mon, 23 Jul 2018 08:53:46 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: 8682084acc624eec1b82baa5bea7e7a675a8c998 [formerly 8682084acc624eec1b82baa5bea7e7a675a8c998 [formerly 8682084acc624eec1b82baa5bea7e7a675a8c998 [formerly 8682084acc624eec1b82baa5bea7e7a675a8c998 [formerly 653c661320c468d379846ce4c58ecf3e20040556 [formerly 6fa5a25c0fb1126fe1741206796301e6620862a8]]]]] Former-commit-id: d4d132d580fcedc4c8017d90bd222f084e873997 Former-commit-id: a3b1b3b4c6e9ba1ee0768bb76f499fc847ace47f Former-commit-id: 90e84f7bfcb435a6662221b0dbe5987c28b357b8 [formerly f142311a489158dd509e423102a9dd060e43c943] Former-commit-id: 0a232c8820c280841b21ef06eef248a1ccf6c8fb Former-commit-id: af52dfb1fd3cec6ede0f4b63f97514fce0a69303 Former-commit-id: 4a4e4e0518a8b61571675004b1d8124c79c5da4b Former-commit-id: 6870ec8172775eb62be5fec82d59786fdc735a0c Former-commit-id: 0aabd5b1d333228230f2e1f100261653fd9c5bfa --- docs/zh/components/container.md | 323 ------------------ .../zh/components/container.md.REMOVED.git-id | 1 + docs/zh/guide/question.md | 2 +- 3 files changed, 2 insertions(+), 324 deletions(-) delete mode 100644 docs/zh/components/container.md create mode 100644 docs/zh/components/container.md.REMOVED.git-id diff --git a/docs/zh/components/container.md b/docs/zh/components/container.md deleted file mode 100644 index 7ffeceeb..00000000 --- a/docs/zh/components/container.md +++ /dev/null @@ -1,323 +0,0 @@ -# 页面容器 - -::: tip 提示 -`` 是 D2Admin 构建页面最重要的组件，请仔细阅读本文档 -::: - -## 参数 - -| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 | -| --- | --- | --- | --- | --- | --- | -| 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) 时传入 -::: - -下面的介绍中 **主区域** 范围见下 - -![](http://fairyever.qiniudn.com/20180722205825.png) - -为了美观，每种模式的布局都会自动在右侧保留 20px 的外边距 - -## full - -full 模式会生成一个无论内容多少，都会填满主区域的页面容器。 - -页面内容较少时，container 也会填满主区域： - -``` vue - -``` - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_normal_short@2x.png) - -页面有较多内容时会在侧面产生滚动条 - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_normal_long@2x.png) - -支持 header 和 footer 插槽，两个区域分别会固定在主体区域的顶部和底部，内容压缩至中间 - -``` vue - -``` - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_slot_short@2x.png) - -如果使用插槽后内容超出一屏，滚动条会出现在 header 和 footer 之间 - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_slot_long@2x.png) - -设置 scroll 属性可以启用自定义滚动条，自定义滚动条在内容不满一屏时不会显示 - -``` vue - -``` - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_bs_short@2x.png) - -超出一屏后在滚动时显示自定义滚动条 - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_bs_long@2x.png) - -如果使用插槽后内容超出一屏，发生滚动时自定义滚动条会出现在 header 和 footer 之间 - -``` vue - -``` - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_bs_long-slot@2x.png) - -## card - -卡片模式适用于简单的小页面，可以方便地实现下面的布局效果： - -``` vue - -``` - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_normal_short@2x.png) - -如果内容超出一屏长度，会在右侧显示滚动条 - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_normal_long@2x.png) - -如果内容超出一屏，滚动条滚动到底部后主体区域会距离底部 20px 距离 - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_normal_long-scroll-end@2x.png) - -支持 header 和 footer 插槽，header 区域会固定在顶部，footer 区域会固定在底部 - -``` vue - -``` - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_slot_short@2x.png) - -如果使用插槽后内容超出一屏，滚动条会在 header 和 footer 之间显示 - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_slot_long@2x.png) - -如果使用插槽后内容超出一屏，滚动条滚动到底部后主体区域依然会距离底部 20px 距离 - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_slot_long-end@2x.png) - -设置 scroll 属性可以启用自定义滚动条，滚动条在内容不满一屏时不会显示 - -``` vue - -``` - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_bs_short@2x.png) - -超出一屏后在滚动时显示自定义滚动条 - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_bs_long@2x.png) - -如果使用插槽后内容超出一屏，发生滚动时自定义滚动条会在 header 和 footer 之间显示 - -``` vue - -``` - -![](http://fairyever.qiniudn.com/2018-07-22-autorename-1-2018-07-22-12-03-45-long-slot@2x.png) - -如果使用插槽后内容超出一屏，自定义滚动条滚动到底部后主体区域依然会距离底部 20px 距离 - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_bs_long-slot-end@2x.png) - -## ghost - -ghost 模式适合对页面有定制需求的用户，此模式生成一个没有背景颜色的页面区域 - -``` vue - -``` - -该模式默认没有内边距，示例中的内边距样式需要自行添加，比如可以在组件内嵌添加一层带有 .d2-pt 和 .d2-pb class 的 div，像下面这样 - -``` vue - -``` - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_normal_short@2x.png) - -如果内容超出一屏长度，会在右侧显示滚动条 - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_normal_long@2x.png) - -支持 header 和 footer 插槽，header 区域会固定在顶部，footer 区域会固定在底部 - -``` vue - -``` - -如果你希望有内边距： - -``` vue - -``` - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_slot_short@2x.png) - -如果使用插槽后内容超出一屏，滚动条会出现在 header 和 footer 之间 - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_slot_long@2x.png) - -设置 scroll 属性可以启用自定义滚动条，自定义滚动条在内容不满一屏时不会显示 - -``` vue - -``` - -同样，如果你希望有内边距： - -``` vue - -``` - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_bs_short@2x.png) - -超出一屏后在滚动时显示自定义滚动条 - -![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_bs_long@2x.png) - -如果使用插槽后内容超出一屏，发生滚动时自定义滚动条会在 header 和 footer 之间显示 - -``` vue - -``` - -有内边距： - -``` vue - -``` - -![](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) 专为此文档设计，未经授权不得转载或者修改使用 - -![](http://fairyever.qiniudn.com/2018-07-22-Snip20180722_2.png) - -![](http://fairyever.qiniudn.com/2018-07-22-Snip20180722_6.png) - - - - - - diff --git a/docs/zh/components/container.md.REMOVED.git-id b/docs/zh/components/container.md.REMOVED.git-id new file mode 100644 index 00000000..9b7dd273 --- /dev/null +++ b/docs/zh/components/container.md.REMOVED.git-id @@ -0,0 +1 @@ +c7d5a011537457f787c1e920da91703f49725638 \ No newline at end of file diff --git a/docs/zh/guide/question.md b/docs/zh/guide/question.md index 17aa5cdb..0a9503ef 100644 --- a/docs/zh/guide/question.md +++ b/docs/zh/guide/question.md @@ -6,7 +6,7 @@ 建议使用 [Free Download Manager](http://www.freedownloadmanager.org/download.htm) 下载，速度会有显著提升 -![](http://fairyever.qiniudn.com/20180722210734.png) +![](http://fairyever.qiniudn.com/20180722210734.png?imageMogr2/auto-orient/thumbnail/1480x/blur/1x0/quality/100|imageslim) ## 无法启动项目