vue-plugin-live2d 0.0.13 → 0.0.15
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/README.md +80 -1
- package/package.json +12 -10
package/README.md
CHANGED
|
@@ -1,3 +1,82 @@
|
|
|
1
1
|
# vue-plugin-live2d
|
|
2
2
|
|
|
3
|
-
live2d.
|
|
3
|
+
**Vue 3 组件适配层** — 把 [`@doki-land/live2d`](https://www.npmjs.com/package/@doki-land/live2d) 包成 `<Live2D>`
|
|
4
|
+
，处理挂载、模型切换、加载进度条与销毁。
|
|
5
|
+
|
|
6
|
+
Live2D 的解码、渲染、动作逻辑仍在 `@doki-land/live2d`；本包只做 Vue 生命周期与 props/events 绑定。
|
|
7
|
+
|
|
8
|
+
## 安装
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm i vue-plugin-live2d @doki-land/live2d vue
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
Peer：`vue ^3.4`。
|
|
15
|
+
|
|
16
|
+
## 注册组件
|
|
17
|
+
|
|
18
|
+
```ts
|
|
19
|
+
// main.ts
|
|
20
|
+
import { createApp } from "vue";
|
|
21
|
+
import { Live2D } from "vue-plugin-live2d";
|
|
22
|
+
import App from "./App.vue";
|
|
23
|
+
|
|
24
|
+
createApp(App).component("Live2D", Live2D).mount("#app");
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
或在 SFC 里按需导入（无需全局注册）：
|
|
28
|
+
|
|
29
|
+
```vue
|
|
30
|
+
<script setup lang="ts">
|
|
31
|
+
import { Live2D } from "vue-plugin-live2d";
|
|
32
|
+
</script>
|
|
33
|
+
|
|
34
|
+
<template>
|
|
35
|
+
<Live2D
|
|
36
|
+
model="/models/wanko/Wanko.model3.json"
|
|
37
|
+
:width="320"
|
|
38
|
+
:height="320"
|
|
39
|
+
:autoplay="true"
|
|
40
|
+
:show-progress="true"
|
|
41
|
+
/>
|
|
42
|
+
</template>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## `<Live2D>` Props
|
|
46
|
+
|
|
47
|
+
| Prop | 类型 | 默认 | 说明 |
|
|
48
|
+
|--------------------|-----------------------|---------------|----------------------------------------------|
|
|
49
|
+
| `model` | `ModelSource \| null` | `null` | model3.json URL、`npm:…` 或 core 内联 source |
|
|
50
|
+
| `width` / `height` | `number` | 320 | 容器与 Canvas 尺寸（px） |
|
|
51
|
+
| `prefer` | `RendererKind[]` | Canvas2D 优先 | 渲染后端探测顺序 |
|
|
52
|
+
| `autoplay` | `boolean` | `true` | 挂载后自动 RAF |
|
|
53
|
+
| `autoSway` | `boolean` | `true` | 自动轻微摇头 |
|
|
54
|
+
| `showProgress` | `boolean` | `true` | 内置加载进度 overlay |
|
|
55
|
+
|
|
56
|
+
## 事件（emit）
|
|
57
|
+
|
|
58
|
+
组件在加载与运行时会抛出进度、帧剖析等事件（详见组件 `defineEmits`）。典型用法：
|
|
59
|
+
|
|
60
|
+
```vue
|
|
61
|
+
<Live2D
|
|
62
|
+
model="npm:live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json"
|
|
63
|
+
@loadprogress="(p) => console.log(p.stage, p.progress)"
|
|
64
|
+
/>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## 暴露的运行时（ref）
|
|
68
|
+
|
|
69
|
+
通过 `ref` 可访问底层 `Live2DRuntime`（`createLive2D` 返回值），用于 `playMotion`、`setParameter` 等 imperative 调用。详见组件
|
|
70
|
+
`defineExpose`。
|
|
71
|
+
|
|
72
|
+
## 与 widget / Hexo 的区别
|
|
73
|
+
|
|
74
|
+
| 包 | 用途 |
|
|
75
|
+
|------------------------------|--------------------------------|
|
|
76
|
+
| **vue-plugin-live2d** | Vue 单页应用内嵌组件 |
|
|
77
|
+
| **@doki-land/live2d-widget** | 框架无关看板娘壳（气泡工具栏） |
|
|
78
|
+
| **hexo-plugin-live2d** | Hexo 静态站注入，零 Vue 依赖 |
|
|
79
|
+
|
|
80
|
+
## 仓库
|
|
81
|
+
|
|
82
|
+
[github.com/doki-land/live2d.ts](https://github.com/doki-land/live2d.ts) · `projects/adaptors/vue-plugin-live2d`
|
package/package.json
CHANGED
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-plugin-live2d",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "Vue
|
|
3
|
+
"version": "0.0.15",
|
|
4
|
+
"description": "Vue 3 <Live2D> component — mount @doki-land/live2d with props, progress UI, and lifecycle.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
|
-
"
|
|
7
|
+
"homepage": "https://github.com/doki-land/live2d.ts",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/doki-land/live2d.ts.git",
|
|
11
|
+
"directory": "projects/adaptors/vue-plugin-live2d"
|
|
12
|
+
},
|
|
8
13
|
"keywords": [
|
|
9
14
|
"live2d",
|
|
10
15
|
"vue",
|
|
@@ -18,7 +23,8 @@
|
|
|
18
23
|
},
|
|
19
24
|
"files": [
|
|
20
25
|
"dist",
|
|
21
|
-
"src"
|
|
26
|
+
"src",
|
|
27
|
+
"README.md"
|
|
22
28
|
],
|
|
23
29
|
"publishConfig": {
|
|
24
30
|
"access": "public"
|
|
@@ -31,11 +37,7 @@
|
|
|
31
37
|
"vue": "^3.4.0"
|
|
32
38
|
},
|
|
33
39
|
"dependencies": {
|
|
34
|
-
"@doki-land/live2d": "0.0.
|
|
40
|
+
"@doki-land/live2d": "0.0.15"
|
|
35
41
|
},
|
|
36
|
-
"sideEffects": false
|
|
37
|
-
"repository": {
|
|
38
|
-
"type": "git",
|
|
39
|
-
"url": "git+https://github.com/doki-land/live2d.ts.git"
|
|
40
|
-
}
|
|
42
|
+
"sideEffects": false
|
|
41
43
|
}
|