Skip to content

Commit cbfacd0

Browse files
IceyWuIceyWu
committed
feat: add LivePhoto component and enhance documentation
- Added LivePhoto component with autoplay feature and improved loading indicators. - Updated documentation to include new LivePhoto component usage and examples. - Enhanced styles for loading and error states in LivePhoto component. - Refactored props to unify image and LivePhoto components. - Introduced new icons for loading and error states. - Improved event handling for video loading and playback.
1 parent ddc62ed commit cbfacd0

File tree

11 files changed

+517
-313
lines changed

11 files changed

+517
-313
lines changed

‎docs/.vitepress/config.mts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,10 @@ export default defineConfig({
174174
{
175175
link: '/component/waterfall',
176176
text: 'Waterfall 瀑布流'
177+
},
178+
{
179+
link:'/component/livephoto',
180+
text: 'LivePhoto 实况照片'
177181
}
178182
]
179183
},

‎docs/.vitepress/locales/zh-CN.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,10 @@ export default defineConfig({
8282
{
8383
link: '/component/waterfall',
8484
text: 'Waterfall 瀑布流'
85+
},
86+
{
87+
link:'/component/livephoto',
88+
text: 'LivePhoto 实况照片'
8589
}
8690
]
8791
}

‎docs/component/livephoto.md‎

Lines changed: 37 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# LivePhoto 实况照片
22

3-
基于 video 和 image 实现的实况照片组件，支持长按播放视频、自定义样式、事件监听等功能。用户可以通过长按图片来播放对应的视频内容，模拟 iOS Live Photo 的效果。
3+
基于 video 和 image 实现的实况照片组件，支持长按播放视频、自动播放、自定义样式、事件监听等功能。用户可以通过长按图片来播放对应的视频内容，模拟 iOS Live Photo 的效果。
44

55
## 基本用法
66

@@ -9,7 +9,7 @@
99
```vue
1010
<up-live-photo
1111
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
12-
image-src="https://picsum.photos/400/300?random=1"
12+
src="https://picsum.photos/400/300?random=1"
1313
width="300"
1414
height="200"
1515
radius="12"
@@ -23,74 +23,40 @@
2323
```vue
2424
<up-live-photo
2525
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
26-
image-src="https://picsum.photos/400/300?random=1"
26+
src="https://picsum.photos/400/300?random=1"
2727
width="300"
2828
height="200"
2929
:radius="20"
3030
/>
3131
```
3232

33-
## 不同尺寸
33+
## 自动播放
3434

35-
支持设置不同的宽度和高度。
35+
通过 `autoplay` 属性启用自动播放模式，视频会自动开始播放，播放结束后仍可手动交互。
3636

3737
```vue
38-
<!-- 小尺寸 -->
3938
<up-live-photo
4039
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
41-
image-src="https://picsum.photos/400/300?random=1"
42-
width="120"
43-
height="80"
44-
radius="8"
45-
/>
46-
47-
<!-- 中尺寸 -->
48-
<up-live-photo
49-
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
50-
image-src="https://picsum.photos/400/300?random=1"
51-
width="180"
52-
height="120"
53-
radius="12"
54-
/>
55-
56-
<!-- 大尺寸 -->
57-
<up-live-photo
58-
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
59-
image-src="https://picsum.photos/400/300?random=1"
60-
width="240"
61-
height="160"
62-
radius="16"
63-
/>
64-
```
65-
66-
## 自定义提示文本
67-
68-
通过 `hint-text` 属性设置自定义的长按提示文本。
69-
70-
```vue
71-
<up-live-photo
72-
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
73-
image-src="https://picsum.photos/400/300?random=1"
40+
src="https://picsum.photos/400/300?random=1"
7441
width="300"
7542
height="200"
7643
radius="12"
77-
hint-text="按住播放动态效果"
44+
:autoplay="true"
7845
/>
7946
```
8047

81-
## 隐藏指示器和提示
48+
## 隐藏指示器
8249

83-
通过 `show-indicator` 和 `show-hint` 属性控制指示器和提示的显示。
50+
通过 `show-indicator` 属性控制指示器的显示。
8451

8552
```vue
8653
<up-live-photo
8754
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
88-
image-src="https://picsum.photos/400/300?random=1"
55+
src="https://picsum.photos/400/300?random=1"
8956
width="300"
9057
height="200"
9158
radius="12"
9259
:show-indicator="false"
93-
:show-hint="false"
9460
/>
9561
```
9662

@@ -101,14 +67,16 @@
10167
```vue
10268
<up-live-photo
10369
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
104-
image-src="https://picsum.photos/400/300?random=1"
70+
src="https://picsum.photos/400/300?random=1"
10571
width="300"
10672
height="200"
10773
radius="12"
10874
@press-start="onPressStart"
10975
@press-end="onPressEnd"
11076
@video-play="onVideoPlay"
11177
@video-pause="onVideoPause"
78+
@video-loaded="onVideoLoaded"
79+
@video-progress="onVideoProgress"
11280
/>
11381
```
11482

@@ -121,7 +89,7 @@
12189
<up-live-photo
12290
ref="livePhotoRef"
12391
video-src="https://sample-videos.com/zip/10/mp4/SampleVideo_360x240_1mb.mp4"
124-
image-src="https://picsum.photos/400/300?random=1"
92+
src="https://picsum.photos/400/300?random=1"
12593
width="300"
12694
height="200"
12795
radius="12"
@@ -156,30 +124,40 @@ function resetComponent() {
156124
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
157125
|-------------------|--------------------------|-------------------|------------------|--------|
158126
| video-src | 视频源地址 | string | - | - |
159-
| image-src | 静态图片源地址 | string | - | - |
127+
| src | 静态图片源地址 | string | - | - |
160128
| width | 组件宽度 | number \| string | '100%' | - |
161129
| height | 组件高度 | number \| string | '100%' | - |
162130
| radius | 圆角大小 | number \| string | 0 | - |
163131
| custom-style | 自定义样式 | string | '' | - |
164132
| custom-class | 自定义类名 | string | '' | - |
165-
| mode | 图片填充模式 | string | 'aspectFill' | - |
133+
| mode | 图片填充模式 | string | 'scaleToFill' | - |
166134
| show-indicator | 是否显示Live Photo指示器 | boolean | true | - |
167-
| show-hint | 是否显示长按提示 | boolean | true | - |
168-
| hint-text | 提示文本 | string | '长按查看实况' | - |
135+
| autoplay | 是否自动播放 | boolean | false | - |
169136
| enable-vibration | 是否启用振动反馈 | boolean | true | - |
170137
| muted | 是否静音播放 | boolean | true | - |
138+
| lazy-load | 是否懒加载图片 | boolean | true | - |
139+
| enable-preview | 是否启用图片预览 | boolean | false | - |
140+
| preview-src | 预览图片地址 | string | '' | - |
141+
| placeholder-src | 占位图片地址 | string | '' | - |
142+
| filter | 图片滤镜 | number \| string | '' | - |
143+
| delay | 加载延迟时间 | number | 0 | - |
144+
| min-height | 最小高度 | number \| string | '200rpx' | - |
145+
| round | 是否为圆形 | boolean | false | - |
171146

172147
## Events
173148

174-
| 事件名 | 说明 | 回调参数 |
175-
|-------------|----------------|----------|
176-
| video-play | 视频开始播放 | - |
177-
| video-pause | 视频暂停播放 | - |
178-
| press-start | 开始长按 | - |
179-
| press-end | 结束长按 | - |
180-
| video-ended | 视频播放结束 | - |
181-
| image-load | 图片加载成功 | - |
182-
| image-error | 图片加载失败 | - |
149+
| 事件名 | 说明 | 回调参数 |
150+
|----------------|----------------|-------------------|
151+
| video-play | 视频开始播放 | - |
152+
| video-pause | 视频暂停播放 | - |
153+
| press-start | 开始长按 | - |
154+
| press-end | 结束长按 | - |
155+
| video-ended | 视频播放结束 | - |
156+
| video-loaded | 视频加载完成 | - |
157+
| video-progress | 视频加载进度 | progress: number |
158+
| load | 图片加载成功 | event |
159+
| error | 图片加载失败 | event |
160+
| click | 图片点击事件 | event |
183161

184162
## Methods
185163

‎src/subPages/list/Index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
}"
4646
>
4747
<template #default="{ item }">
48-
<view class="list-item-box" :key="item.id">
48+
<view class="list-item-box">
4949
<image :src="item.cover" class="cover" mode="aspectFill" />
5050
<view class="content">
5151
<view class="title">{{ item.title }}</view>

0 commit comments

Comments
 (0)