@wapri/ghooks 0.2.19-beta.0 → 0.2.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/useLottie/demo/remote.vue +169 -169
- package/package.json +3 -3
|
@@ -1,169 +1,169 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { onMounted, ref } from 'vue'
|
|
3
|
-
import { useLottie } from '@wapri/ghooks'
|
|
4
|
-
|
|
5
|
-
/** 远程 json 地址：交给 lottie-web 自己发请求，不需要先 fetch（示例地址，换成自己的 CDN 即可） */
|
|
6
|
-
const REMOTE_URL = 'https://cdn.example.com/lottie/loading.json'
|
|
7
|
-
|
|
8
|
-
const container = ref<HTMLElement>()
|
|
9
|
-
const status = ref('远程资源加载中…')
|
|
10
|
-
|
|
11
|
-
const { instance, play, pause, stop, playSegments, playAnimation, setLoop, getDuration, on } = useLottie(
|
|
12
|
-
container,
|
|
13
|
-
null,
|
|
14
|
-
{
|
|
15
|
-
path: REMOTE_URL,
|
|
16
|
-
loop: true,
|
|
17
|
-
onReady: (item) => {
|
|
18
|
-
status.value = `远程资源加载完成，共 ${item.totalFrames} 帧`
|
|
19
|
-
},
|
|
20
|
-
},
|
|
21
|
-
)
|
|
22
|
-
|
|
23
|
-
// useLottie 在 onMounted 里创建实例，这里注册晚于它，所以能拿到实例
|
|
24
|
-
onMounted(() => {
|
|
25
|
-
on('data_failed', () => {
|
|
26
|
-
status.value = '远程资源加载失败：请检查地址是否可访问、以及是否允许跨域'
|
|
27
|
-
})
|
|
28
|
-
})
|
|
29
|
-
|
|
30
|
-
/** 一次播放两段区间 */
|
|
31
|
-
const handleSegmentPlay = () => {
|
|
32
|
-
setLoop(true)
|
|
33
|
-
status.value = '区间播放：[0,24] + [24,72]'
|
|
34
|
-
playSegments([
|
|
35
|
-
[0, 24],
|
|
36
|
-
[24, 72],
|
|
37
|
-
])
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
/** 关闭循环后按顺序异步播放两段，每段结束才进入下一段 */
|
|
41
|
-
const handleAsyncPlay = async () => {
|
|
42
|
-
setLoop(false)
|
|
43
|
-
status.value = '第一段开始'
|
|
44
|
-
await playAnimation([[0, 24]], true)
|
|
45
|
-
status.value = '第一段结束'
|
|
46
|
-
await new Promise((resolve) => setTimeout(resolve, 600))
|
|
47
|
-
status.value = '第二段开始'
|
|
48
|
-
await playAnimation([24, 72])
|
|
49
|
-
status.value = '第二段结束'
|
|
50
|
-
}
|
|
51
|
-
</script>
|
|
52
|
-
|
|
53
|
-
<template>
|
|
54
|
-
<div class="lottie-remote-demo">
|
|
55
|
-
<div
|
|
56
|
-
ref="container"
|
|
57
|
-
class="lottie-remote-demo__stage"
|
|
58
|
-
></div>
|
|
59
|
-
|
|
60
|
-
<div class="lottie-remote-demo__panel">
|
|
61
|
-
<div class="lottie-remote-demo__actions">
|
|
62
|
-
<button
|
|
63
|
-
type="button"
|
|
64
|
-
@click="play"
|
|
65
|
-
>
|
|
66
|
-
播放
|
|
67
|
-
</button>
|
|
68
|
-
<button
|
|
69
|
-
type="button"
|
|
70
|
-
@click="pause"
|
|
71
|
-
>
|
|
72
|
-
暂停
|
|
73
|
-
</button>
|
|
74
|
-
<button
|
|
75
|
-
type="button"
|
|
76
|
-
@click="stop"
|
|
77
|
-
>
|
|
78
|
-
停止
|
|
79
|
-
</button>
|
|
80
|
-
<button
|
|
81
|
-
type="button"
|
|
82
|
-
@click="handleSegmentPlay"
|
|
83
|
-
>
|
|
84
|
-
帧播放
|
|
85
|
-
</button>
|
|
86
|
-
<button
|
|
87
|
-
type="button"
|
|
88
|
-
@click="handleAsyncPlay"
|
|
89
|
-
>
|
|
90
|
-
异步多段动画
|
|
91
|
-
</button>
|
|
92
|
-
</div>
|
|
93
|
-
|
|
94
|
-
<p class="lottie-remote-demo__status">{{ status }}</p>
|
|
95
|
-
<p class="lottie-remote-demo__status">
|
|
96
|
-
{{ instance ? `实例已就绪，总时长 ${getDuration(false).toFixed(2)}s` : '实例加载中…' }}
|
|
97
|
-
</p>
|
|
98
|
-
<p class="lottie-remote-demo__url">{{ REMOTE_URL }}</p>
|
|
99
|
-
</div>
|
|
100
|
-
</div>
|
|
101
|
-
</template>
|
|
102
|
-
|
|
103
|
-
<style scoped>
|
|
104
|
-
.lottie-remote-demo {
|
|
105
|
-
display: flex;
|
|
106
|
-
max-width: 760px;
|
|
107
|
-
flex-wrap: wrap;
|
|
108
|
-
align-items: center;
|
|
109
|
-
gap: 20px;
|
|
110
|
-
padding: 20px;
|
|
111
|
-
border: 1px solid #e5e7eb;
|
|
112
|
-
border-radius: 8px;
|
|
113
|
-
color: #1f2937;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
.lottie-remote-demo__stage {
|
|
117
|
-
width: 240px;
|
|
118
|
-
height: 240px;
|
|
119
|
-
flex: 0 0 auto;
|
|
120
|
-
border-radius: 8px;
|
|
121
|
-
background: #f8fafc;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.lottie-remote-demo__panel {
|
|
125
|
-
flex: 1;
|
|
126
|
-
min-width: 260px;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.lottie-remote-demo__actions {
|
|
130
|
-
display: flex;
|
|
131
|
-
flex-wrap: wrap;
|
|
132
|
-
gap: 8px;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.lottie-remote-demo__actions button {
|
|
136
|
-
height: 32px;
|
|
137
|
-
padding: 0 14px;
|
|
138
|
-
border: 1px solid #d1d5db;
|
|
139
|
-
border-radius: 4px;
|
|
140
|
-
background: #fff;
|
|
141
|
-
color: inherit;
|
|
142
|
-
font: inherit;
|
|
143
|
-
font-size: 14px;
|
|
144
|
-
cursor: pointer;
|
|
145
|
-
transition:
|
|
146
|
-
border-color 0.2s,
|
|
147
|
-
color 0.2s;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.lottie-remote-demo__actions button:hover {
|
|
151
|
-
border-color: #f97316;
|
|
152
|
-
color: #ea580c;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.lottie-remote-demo__status {
|
|
156
|
-
margin: 14px 0 0;
|
|
157
|
-
color: #6b7280;
|
|
158
|
-
font-size: 13px;
|
|
159
|
-
line-height: 1.8;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.lottie-remote-demo__url {
|
|
163
|
-
margin: 8px 0 0;
|
|
164
|
-
color: #9ca3af;
|
|
165
|
-
font-size: 12px;
|
|
166
|
-
line-height: 1.6;
|
|
167
|
-
word-break: break-all;
|
|
168
|
-
}
|
|
169
|
-
</style>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { onMounted, ref } from 'vue'
|
|
3
|
+
import { useLottie } from '@wapri/ghooks'
|
|
4
|
+
|
|
5
|
+
/** 远程 json 地址：交给 lottie-web 自己发请求，不需要先 fetch（示例地址，换成自己的 CDN 即可） */
|
|
6
|
+
const REMOTE_URL = 'https://cdn.example.com/lottie/loading.json'
|
|
7
|
+
|
|
8
|
+
const container = ref<HTMLElement>()
|
|
9
|
+
const status = ref('远程资源加载中…')
|
|
10
|
+
|
|
11
|
+
const { instance, play, pause, stop, playSegments, playAnimation, setLoop, getDuration, on } = useLottie(
|
|
12
|
+
container,
|
|
13
|
+
null,
|
|
14
|
+
{
|
|
15
|
+
path: REMOTE_URL,
|
|
16
|
+
loop: true,
|
|
17
|
+
onReady: (item) => {
|
|
18
|
+
status.value = `远程资源加载完成，共 ${item.totalFrames} 帧`
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
)
|
|
22
|
+
|
|
23
|
+
// useLottie 在 onMounted 里创建实例，这里注册晚于它，所以能拿到实例
|
|
24
|
+
onMounted(() => {
|
|
25
|
+
on('data_failed', () => {
|
|
26
|
+
status.value = '远程资源加载失败：请检查地址是否可访问、以及是否允许跨域'
|
|
27
|
+
})
|
|
28
|
+
})
|
|
29
|
+
|
|
30
|
+
/** 一次播放两段区间 */
|
|
31
|
+
const handleSegmentPlay = () => {
|
|
32
|
+
setLoop(true)
|
|
33
|
+
status.value = '区间播放：[0,24] + [24,72]'
|
|
34
|
+
playSegments([
|
|
35
|
+
[0, 24],
|
|
36
|
+
[24, 72],
|
|
37
|
+
])
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/** 关闭循环后按顺序异步播放两段，每段结束才进入下一段 */
|
|
41
|
+
const handleAsyncPlay = async () => {
|
|
42
|
+
setLoop(false)
|
|
43
|
+
status.value = '第一段开始'
|
|
44
|
+
await playAnimation([[0, 24]], true)
|
|
45
|
+
status.value = '第一段结束'
|
|
46
|
+
await new Promise((resolve) => setTimeout(resolve, 600))
|
|
47
|
+
status.value = '第二段开始'
|
|
48
|
+
await playAnimation([24, 72])
|
|
49
|
+
status.value = '第二段结束'
|
|
50
|
+
}
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
<template>
|
|
54
|
+
<div class="lottie-remote-demo">
|
|
55
|
+
<div
|
|
56
|
+
ref="container"
|
|
57
|
+
class="lottie-remote-demo__stage"
|
|
58
|
+
></div>
|
|
59
|
+
|
|
60
|
+
<div class="lottie-remote-demo__panel">
|
|
61
|
+
<div class="lottie-remote-demo__actions">
|
|
62
|
+
<button
|
|
63
|
+
type="button"
|
|
64
|
+
@click="play"
|
|
65
|
+
>
|
|
66
|
+
播放
|
|
67
|
+
</button>
|
|
68
|
+
<button
|
|
69
|
+
type="button"
|
|
70
|
+
@click="pause"
|
|
71
|
+
>
|
|
72
|
+
暂停
|
|
73
|
+
</button>
|
|
74
|
+
<button
|
|
75
|
+
type="button"
|
|
76
|
+
@click="stop"
|
|
77
|
+
>
|
|
78
|
+
停止
|
|
79
|
+
</button>
|
|
80
|
+
<button
|
|
81
|
+
type="button"
|
|
82
|
+
@click="handleSegmentPlay"
|
|
83
|
+
>
|
|
84
|
+
帧播放
|
|
85
|
+
</button>
|
|
86
|
+
<button
|
|
87
|
+
type="button"
|
|
88
|
+
@click="handleAsyncPlay"
|
|
89
|
+
>
|
|
90
|
+
异步多段动画
|
|
91
|
+
</button>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<p class="lottie-remote-demo__status">{{ status }}</p>
|
|
95
|
+
<p class="lottie-remote-demo__status">
|
|
96
|
+
{{ instance ? `实例已就绪，总时长 ${getDuration(false).toFixed(2)}s` : '实例加载中…' }}
|
|
97
|
+
</p>
|
|
98
|
+
<p class="lottie-remote-demo__url">{{ REMOTE_URL }}</p>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
</template>
|
|
102
|
+
|
|
103
|
+
<style scoped>
|
|
104
|
+
.lottie-remote-demo {
|
|
105
|
+
display: flex;
|
|
106
|
+
max-width: 760px;
|
|
107
|
+
flex-wrap: wrap;
|
|
108
|
+
align-items: center;
|
|
109
|
+
gap: 20px;
|
|
110
|
+
padding: 20px;
|
|
111
|
+
border: 1px solid #e5e7eb;
|
|
112
|
+
border-radius: 8px;
|
|
113
|
+
color: #1f2937;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.lottie-remote-demo__stage {
|
|
117
|
+
width: 240px;
|
|
118
|
+
height: 240px;
|
|
119
|
+
flex: 0 0 auto;
|
|
120
|
+
border-radius: 8px;
|
|
121
|
+
background: #f8fafc;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.lottie-remote-demo__panel {
|
|
125
|
+
flex: 1;
|
|
126
|
+
min-width: 260px;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.lottie-remote-demo__actions {
|
|
130
|
+
display: flex;
|
|
131
|
+
flex-wrap: wrap;
|
|
132
|
+
gap: 8px;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.lottie-remote-demo__actions button {
|
|
136
|
+
height: 32px;
|
|
137
|
+
padding: 0 14px;
|
|
138
|
+
border: 1px solid #d1d5db;
|
|
139
|
+
border-radius: 4px;
|
|
140
|
+
background: #fff;
|
|
141
|
+
color: inherit;
|
|
142
|
+
font: inherit;
|
|
143
|
+
font-size: 14px;
|
|
144
|
+
cursor: pointer;
|
|
145
|
+
transition:
|
|
146
|
+
border-color 0.2s,
|
|
147
|
+
color 0.2s;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.lottie-remote-demo__actions button:hover {
|
|
151
|
+
border-color: #f97316;
|
|
152
|
+
color: #ea580c;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.lottie-remote-demo__status {
|
|
156
|
+
margin: 14px 0 0;
|
|
157
|
+
color: #6b7280;
|
|
158
|
+
font-size: 13px;
|
|
159
|
+
line-height: 1.8;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.lottie-remote-demo__url {
|
|
163
|
+
margin: 8px 0 0;
|
|
164
|
+
color: #9ca3af;
|
|
165
|
+
font-size: 12px;
|
|
166
|
+
line-height: 1.6;
|
|
167
|
+
word-break: break-all;
|
|
168
|
+
}
|
|
169
|
+
</style>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wapri/ghooks",
|
|
3
|
-
"version": "0.2.19
|
|
3
|
+
"version": "0.2.19",
|
|
4
4
|
"description": "hooks工具库",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
"lottie-api": "^1.0.3",
|
|
16
16
|
"lottie-web": "^5.13.0",
|
|
17
17
|
"vue-hooks-plus": "^2.4.3",
|
|
18
|
-
"@wapri/gbase": "^1.0.1
|
|
19
|
-
"@wapri/ghermes": "^3.0.0
|
|
18
|
+
"@wapri/gbase": "^1.0.1",
|
|
19
|
+
"@wapri/ghermes": "^3.0.0"
|
|
20
20
|
},
|
|
21
21
|
"publishConfig": {
|
|
22
22
|
"access": "public",
|