487ef6fd52
Former-commit-id: 4c38f2bd200ccd90eb4dc0f3367d67d7cb47d1b1 [formerly 4c38f2bd200ccd90eb4dc0f3367d67d7cb47d1b1 [formerly 4c38f2bd200ccd90eb4dc0f3367d67d7cb47d1b1 [formerly 4c38f2bd200ccd90eb4dc0f3367d67d7cb47d1b1 [formerly d8e1aaf4c26758680dc4cd5b51db886ffd86739e [formerly d0781c0d13d71384cd307e564a6176e64e49e7a0]]]]] Former-commit-id: 26b2872a282b3ccb01e328b200411719aaf176fd Former-commit-id: 143fdba770bf4ca1e72fb274470539ac7b6137dd Former-commit-id: 63cee2802670283c503adb7e81084dc675523d55 [formerly f77bebb96c5377ade8f8adbd0bb0c7c30cf5b7c0] Former-commit-id: 48161dd47c512e4036d37d658a2b166c2934e493 Former-commit-id: dd9be6e4aa02bd20895f2afdaf1a4b7e33af2539 Former-commit-id: 5be876509b54638f6e4e7ec60beddcbda54d8d1f Former-commit-id: 9a6fd0bf985b7090c23f1a3364137a1b2155af32 Former-commit-id: 70ca09c855926f74e60451e5b60581a29a708abd
95 lines
1.8 KiB
Markdown
95 lines
1.8 KiB
Markdown
# 页面容器
|
|
|
|
页面容器组件是每个页面的基础，为了在整个项目中统一效果，它应该是 `<template>` 组件的直接子组件
|
|
|
|
## 参数
|
|
|
|
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
| --- | --- | --- | --- | --- | --- |
|
|
| type | 容器类型 | 非 | String | card ghost full | card |
|
|
| responsive | 响应式宽度 | 非 | Boolean | | false |
|
|
|
|
## 事件
|
|
|
|
| 事件名 | 介绍 | 回调参数 |
|
|
| --- | --- | --- |
|
|
| resized | type 为 full 时页面完成尺寸计算会触发此事件 | |
|
|
|
|
::: 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>
|
|
```
|
|
|
|
## 隐形页面容器
|
|
|
|
不显示任何背景色和边框
|
|
|
|
``` vue
|
|
<d2-container type="ghost">
|
|
主体内容
|
|
</d2-container>
|
|
``` |