docs: add lightbox docs
Change-Id: I736b5710e75f7b02ef6260af4c2081a54e6d0981
This commit is contained in:
xiaodemen
GU Yiling
109
one/docs/components/lightbox.md
Normal file
109
one/docs/components/lightbox.md
Normal file
@@ -0,0 +1,109 @@
|
||||
# Lightbox <small>灯箱</small>
|
||||
|
||||
## 示例
|
||||
|
||||
[[ demo src="/demo/lightbox/default.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| -- | -- | -- | -- |
|
||||
| `ui` | `string=` | - | 预设样式。`veui-theme-dls` 未提供，可自定义。 |
|
||||
| `open` | `boolean` | `false` | [^open] |
|
||||
| `datasource` | `Array<Object>` | `[]` | [^datasource] |
|
||||
| `index` | `number=` | `0` | [^index] |
|
||||
| `wrap` | `boolean=` | `false` | 是否可以循环播放。 |
|
||||
| `closable` | `boolean=` | `true` | 是否显示关闭按钮。 |
|
||||
| `escapable` | `boolean=` | `true` | 按下 <kbd>esc</kbd> 键是否可以关闭浮层。仅在 `closable` 为 `true` 时生效。 |
|
||||
| `priority` | `number=` | - | 浮层层叠权重，参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props) 属性。 |
|
||||
| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | [^before-close] |
|
||||
| `overlay-class` | `string|Array|Object=` | - | 浮层根元素类名，参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props) 属性。 |
|
||||
| `indicator` | `string=` | `'number'` | [^indicator] |
|
||||
| `options` | `object=` | `{video: {muted: true, autoplay: true, controls: true}}` | 额外配置。 |
|
||||
|
||||
^^^open
|
||||
:::badges
|
||||
`.sync`
|
||||
:::
|
||||
|
||||
是否显示浮层。
|
||||
^^^
|
||||
|
||||
^^^datasource
|
||||
灯箱数据源，项目类型为：`{src, alt, type}`。
|
||||
|
||||
+++字段详情
|
||||
| 名称 | 类型 | 描述 |
|
||||
| -- | -- | -- |
|
||||
| `src` | `string` | 媒体源地址。 |
|
||||
| `type` | `string=` | 默认图片类型，`video` 表示视频。 |
|
||||
| `alt` | `string=` | 图片的降级描述文本。 |
|
||||
| `desc` | `string=` | 该项目的描述文本。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
^^^index
|
||||
:::badges
|
||||
`.sync`
|
||||
:::
|
||||
|
||||
当前播放序号。
|
||||
^^^
|
||||
|
||||
^^^indicator
|
||||
播放进度指示器的显示模式。
|
||||
|
||||
+++枚举值
|
||||
| 值 | 描述 |
|
||||
| -- | -- |
|
||||
| `number` | 显示「当前页数/全部页数」文字提示。 |
|
||||
| `none` | 不显示指示器。 |
|
||||
^^^
|
||||
|
||||
^^^before-close
|
||||
在将触发浮层关闭的操作发生后执行，类型为 `function(type: string): boolean=|Promise<boolean=>`。`type` 为触发关闭的类型，默认情况下可选值为 `'ok'|'cancel'`。返回值可以是一个 `boolean`，也可以是一个 resolve `boolean` 的 `Promise`，用来处理可能需要异步决定浮层关闭状态的情况。返回值或 resolve 值非 `false` 时才会关闭浮层。
|
||||
|
||||
+++调用示例
|
||||
```html
|
||||
<veui-lightbox :open.sync="dialogOpen" :before-close="submit">...</veui-lightbox>
|
||||
```
|
||||
^^^
|
||||
|
||||
### 插槽
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| `item` | [^slot-item] |
|
||||
| `desc` | [^slot-desc] |
|
||||
|
||||
^^^slot-item
|
||||
可用来定制每个灯箱项的媒体展示区域。
|
||||
|
||||
默认内容：每项图片或视频。
|
||||
|
||||
作用域参数为 `datasource` 属性每个列表项的内容（可以有自定义字段）加上 `index: number` 表示轮播项的序号。即整个 `slot-scope` 绑定的值为 `{src, alt, type, desc, index, ...}`。
|
||||
^^^
|
||||
|
||||
^^^slot-desc
|
||||
可用来定制每个灯箱项的描述区域。
|
||||
|
||||
默认内容：每项描述文字。
|
||||
|
||||
作用域参数为 `datasource` 属性每个列表项的内容（可以有自定义字段）加上 `index: number` 表示轮播项的序号。即整个 `slot-scope` 绑定的值为 `{src, alt, type, desc, index, ...}`。
|
||||
^^^
|
||||
|
||||
### 事件
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| `cancel` | 灯箱关闭后触发。 |
|
||||
|
||||
### 图标
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| `close` | 关闭。 |
|
||||
| `prev` | 上一页。 |
|
||||
| `next` | 下一页。 |
|
||||
83
one/docs/demo/lightbox/default.vue
Normal file
83
one/docs/demo/lightbox/default.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<article>
|
||||
<div>
|
||||
<veui-check-box
|
||||
v-model="wrap"
|
||||
>循环播放</veui-check-box>
|
||||
<veui-check-box
|
||||
v-model="indicator"
|
||||
true-value="number"
|
||||
false-value="none"
|
||||
>头部页码</veui-check-box>
|
||||
</div>
|
||||
<veui-button
|
||||
class="mt-3p"
|
||||
ui="primary"
|
||||
@click="open = true"
|
||||
>展现灯箱</veui-button>
|
||||
<veui-lightbox
|
||||
:open.sync="open"
|
||||
:datasource="items"
|
||||
:wrap="wrap"
|
||||
:indicator="indicator"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Lightbox, Checkbox, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-lightbox': Lightbox,
|
||||
'veui-check-box': Checkbox,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
wrap: false,
|
||||
indicator: 'number',
|
||||
open: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
items() {
|
||||
return [
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
|
||||
alt: 'A cute kitty looking at you with its greenish eyes.',
|
||||
desc: 'Cat'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
|
||||
alt: 'A common kingfisher flying above river.',
|
||||
desc: 'Kingfisher'
|
||||
},
|
||||
{
|
||||
src: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm',
|
||||
alt: 'flower video',
|
||||
desc: '花',
|
||||
type: 'video'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
|
||||
alt: 'A white and gray dolphin in blue water.',
|
||||
desc: 'Dolphin'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-checkbox {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.mt-3p {
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -302,6 +302,10 @@
|
||||
{
|
||||
"title": "Accordion - 手风琴面板",
|
||||
"slug": "accordion"
|
||||
},
|
||||
{
|
||||
"title": "Lightbox - 灯箱",
|
||||
"slug": "lightbox"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user