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 - 手风琴面板",
|
"title": "Accordion - 手风琴面板",
|
||||||
"slug": "accordion"
|
"slug": "accordion"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Lightbox - 灯箱",
|
||||||
|
"slug": "lightbox"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user