1ef066f47d
Former-commit-id: dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly 8bbdd72ba63cd9161b2b2e51826b8813e8c9fffc [formerly e7d3090ad5a6f6801b32d0abce9a4e9291fcc0e7]]]]] Former-commit-id: 1be4f8ac464528598b8a52649c107686d01c08d8 Former-commit-id: 7317640b0da3a039d8ca5b6457c1263fc1261272 Former-commit-id: 29d4f7df0be48866f4309a012d38e008e1725438 [formerly 9ee9681b4a3200cc3b344673e83d9f5e4343f07a] Former-commit-id: fddc0694f8fbf921142069e11ff694ea218fa0d9 Former-commit-id: 92059d07f780aa09aaff77faf9bc41a8bd6269f0 Former-commit-id: aef5ddaf56545324913a9b425e7f8b7c3ed45518 Former-commit-id: 279be73fde5a48ddc78a258a2ea55a3b0d64fe2b Former-commit-id: b970cb8f0bbe694a3bf733e726f8c833a1f3f511
115 lines
2.3 KiB
Markdown
115 lines
2.3 KiB
Markdown
# 页面容器
|
|
|
|
页面容器组件是每个页面的基础，为了在整个项目中统一效果，它应该是 `<template>` 组件的直接子组件
|
|
|
|
## 参数
|
|
|
|
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
| --- | --- | --- | --- | --- | --- |
|
|
| type | 容器类型 | 非 | String | card ghost full | card |
|
|
| scroll | 滚动优化 | 非 | Boolean | | false |
|
|
| responsive | 响应式宽度 | 非 | Boolean | | false |
|
|
|
|
::: tip
|
|
`responsive` 参数设置只在 `type` 等于 `card` 或 `ghost` 时生效
|
|
:::
|
|
|
|
## 使用方法
|
|
|
|
一个基础单文件页面组件的示例
|
|
|
|
``` vue
|
|
<template>
|
|
<d2-container>
|
|
<template slot="header">
|
|
可选的 header 内容 ...
|
|
</template>
|
|
主体内容 ...
|
|
</d2-container>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'your-component-name'
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 需要的话引入
|
|
@import '~@/assets/style/public.scss';
|
|
</style>
|
|
```
|
|
|
|
### 基础页面容器
|
|
|
|
高度根据内容适应
|
|
|
|
``` vue
|
|
<d2-container>
|
|
主体内容
|
|
</d2-container>
|
|
```
|
|
|
|
使用 `slot`
|
|
|
|
``` vue
|
|
<d2-container>
|
|
<template slot="header">我是插入到 header 中的内容</template>
|
|
主体内容
|
|
</d2-container>
|
|
```
|
|
|
|
### 自适应填充页面容器
|
|
|
|
无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽
|
|
|
|
示例：
|
|
|
|
``` vue
|
|
<template>
|
|
<d2-container type="full">
|
|
<template slot="header">
|
|
可选的 header 内容 ...
|
|
</template>
|
|
主体内容 ...
|
|
<template slot="footer">
|
|
可选的 footer 内容 ...
|
|
</template>
|
|
</d2-container>
|
|
</template>
|
|
```
|
|
|
|
`v1.1.4` 新增
|
|
|
|
你可以通过设置 `scroll` 来启用自定义滚动条，看起来更美观一些
|
|
|
|
> 有些情况下使用滚动优化模式会有意外影响，例如页面内含有可拖拽的元素，这时候最好不要使用此模式
|
|
|
|
示例：
|
|
|
|
``` vue
|
|
<template>
|
|
<d2-container type="full" scroll>
|
|
<template slot="header">
|
|
可选的 header 内容 ...
|
|
</template>
|
|
主体内容 ...
|
|
<template slot="footer">
|
|
可选的 footer 内容 ...
|
|
</template>
|
|
</d2-container>
|
|
</template>
|
|
```
|
|
|
|
### 隐形页面容器
|
|
|
|
不显示任何背景色和边框，通常这个模式只有在极少情况下会使用
|
|
|
|
``` vue
|
|
<d2-container type="ghost">
|
|
主体内容
|
|
</d2-container>
|
|
```
|
|
|
|
如果你不希望内容紧贴上边，可以在内容外层容器设置 `class="d2-mt"`
|