vue3-live2d
vue3 看板娘
在线浏览
https://vue3-live2d.vercel.app
本仓库改写自 vue-live2d
在项目中使用
npm install vue3-live2d
// 在组件中引入
import vue3Live2d from 'vue3-live2d'
// 组件中的使用方法具体参考 `src/App.vue` 文件</template>
<live2d
class="live2d"
v-model:width="300"
v-model:height="300"
v-model:resolution="2"
:style="{ position: 'fixed', bottom: 0, right: 0, zIndex: 1 }"
:api-path="'https://vue3-live2d.vercel.app/vue3-live2d-static-api/indexes'"
:model="['Potion-Maker/Pio', 'school-2017-costume-yellow']"
:tips="tips"
/>
</template>
<script setup lang="ts">
import live2d from "vue3-live2d";
import { ref } from "vue";
let tips = ref({
mouseover: [
{
selector: ".vue3-live2d",
texts: ["请查看源代码了解如何修改默认语句"],
},
],
});
</script>本地浏览
其中包含源码，src/App.vue 为使用示例。
git clone https://github.com/YiguiDing/vue3-live2d.git
cd ./vue3-live2d
npm install
# 安装子模块
git submodule update --init --recursive
npm run dev配置参数
参数说明
| 配置项 | 含义 | 类型 | 默认 |
|---|---|---|---|
| width | div和canvas的宽高 | Number | 400 |
| height | div和canvas的宽高 | Number | 400 |
| resolution | 决定了canvas的清晰度，resolution=M 则,清晰度=width*M x height*M，推荐值为2， |
Number | 1 |
| apiPath | 更换模型的请求地址,推荐值 https://vue3-live2d.vercel.app/vue3-live2d-static-api/indexes
|
String | /vue3-live2d-static-api/indexes |
| model | 默认显示的模型，[模型号，服装号] | Array | ['Potion-Maker/Pio', 'school-2017-costume-yello'] |
| isLeft | 模型是否在左边 | Boolean | false |
| isTipBottom | 提示框位置是否在底部 | Boolean | false |
| tips | 在触发某些事件时模型说出的话 | Object | 格式查看 /src/options/tips.js |
| homePage | 可打开某页面的地址 | String | https://github.com/YiguiDing/vue3-live2d |
| customId | 自定义 id | String | vue3-live2d-main |
具体说明
apiPath 添加获取模型的地址
-
默认值：
/vue3-live2d-static-api/indexes -
推荐值：
https://vue3-live2d.vercel.app/vue3-live2d-static-api/indexes -
自定义值：
- 建议fork仓库：
- 将模型仓库作为子仓库添加到public或是其他目录
# 将模型仓库克隆到public或是其他目录 git submodule add git@github.com:YiguiDing/vue3-live2d-static-api.git /path/to/your/public/or/web-root/dir/live2d-static-api - 修改添加模型到
??/models/目录下 - 执行脚本
build.js - 修改
apiPath=/你的目录/vue3-live2d-static-api/indexes