docs: add docs for carousel and config-provider (#8)

* docs: add docs for carousel and config-provider
This commit is contained in:
xdm
2021-09-15 19:04:39 +08:00
committed by GitHub
parent 5878fe4ac9
commit 1b98a996ff
11 changed files with 727 additions and 373 deletions

View File

@@ -8,7 +8,7 @@
[[ demo src="/demo/carousel/switch.vue" ]]
### 进度指示器类型
### 进度指示器
使用 `indicator` 属性来指定进度指示器类型。
@@ -20,6 +20,28 @@
[[ demo src="/demo/carousel/autoplay.vue" ]]
### 切换效果
指定 `effect` 属性来设置切换效果。
[[ demo src="/demo/carousel/effect.vue" ]]
### 纵向布局
指定 `vertical` 属性来允许纵向布局的轮播。
使用 `controls-position` 属性来切换按钮相对于布局方向的位置。
[[ demo src="/demo/carousel/vertical.vue" ]]
### 轮播项设置
`slides-per-view` 属性来指定同时显示多少个轮播项。
`slides-per-group` 属性来指定每次前后切换的一组包含多少个轮播项。
[[ demo src="/demo/carousel/slides.vue" ]]
## API
### 属性
@@ -34,16 +56,26 @@
| `pause-on-hover` | `boolean=` | `false` | 在自动轮播时,鼠标悬浮后是否暂停。 |
| `interval` | `number=` | `3000` | 在自动轮播时,切换间隔的毫秒数。 |
| `wrap` | `boolean=` | `false` | 是否可以循环播放。 |
| `effect` | `'fade' | 'slide'` | `'fade'` | 指定轮播切换效果,其中 `fade` 仅在切换组个数与同时显示个数相同时生效。 |
| `vertical` | `boolean=` | `false` | 是否是纵向布局的轮播。 |
| `indicator-align` | `'start' | 'end'` | `start` | 用于支持指示器的相对于布局方向的位置。 |
| `indicator-position` | `'outside' | 'inside'` | `inside` | 用于支持指示器显示在轮播容器的内部/外部。 |
| `controls-position` | `'outside' | 'inside'` | `inside` | 用于支持切换按钮相对于布局方向的位置。 |
| `slide-aspect-ratio` | `number= | '${number}/${number}'` | - | 指定不同轮播项类型的默认配置。 |
| `options` | `Object=` | `{ video: { muted: true, autoplay: true, controls: true, loop: true } }` | 用于指定每个轮播项的纵横比。 |
| `slides-per-view` | `number=` | `1` | 指定同时显示多少个轮播项。 |
| `slides-per-group` | `number=` | `1` | 指定每次前后切换的一组包含多少个轮播项。 |
^^^datasource
轮播图数据源,项目类型为:`{src, alt, label}`
轮播图数据源,项目类型为:`{src, alt, label, type}`
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `src` | `string` | 图片源地址。 |
| `alt` | `string` | 图片的降级描述文本。 |
| `label` | `string` | 图片的描述性标题。 |
| `src` | `string` | 媒体源地址。 |
| `alt` | `string` | 媒体的降级描述文本。 |
| `label` | `string` | 媒体的描述性标题。 |
| `type` | `string` | 媒体的描述性标题,视频需要指定 `video`。 |
+++
^^^
@@ -61,8 +93,9 @@
+++枚举值
| 值 | 描述 |
| -- | -- |
| `radio` | 单选按钮型。 |
| `bar` | 单选按钮型,用于替换之前的 `radio``radio` 也保持兼容支持)。 |
| `number` | 显示「当前页数/全部页数」文字提示。 |
| `dot` | 圆点型。 |
| `none` | 不显示指示器。 |
^^^

View File

@@ -42,7 +42,6 @@
| `placeholder` | `string` | `cascader.placeholder` | 未选择时的占位文本。 |
| `clearable` | `boolean` | `false` | 是否可以清除已选内容。 |
| `searchable` | `boolean` | `false` | 是否允许搜索选项。 |
| `filter` | `function` | - | 选项过滤函数,签名为 `function(option: Object): boolean``option` 类型与 `options` 属性中的项相同。返回值表示是否将结果保留在下拉选项列表中。 |
| `expanded` | `boolean=` | `false` | [^expanded] |
| `column-trigger` | `hover | click` | `click` | [^column-trigger] |
| `select-mode` | `'leaf-only' | 'any'` | `any` | [^select-mode] |

View File

@@ -0,0 +1,22 @@
# ConfigProvider <small>配置器</small>
## 示例
### 配置 `Select` 的 `placeholder`
[[ demo src="/demo/config-provider/select.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| `value` | `Object` | - | 向其后代组件提供的配置值。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| `default` | 需要接收配置的内容,其中 VEUI 的组件会响应对应的配置值。 |