live2d-vue3
v0.2.0
Published
基于vue的简单强大的live2d模型
Downloads
10
Readme
使用方法
npm i live2d-vue3
import { createApp } from 'vue'
import App from './App.vue'
import live2d from 'live2d-vue3'
import 'live2d-vue3/dist/live2d-vue3.css'
createApp(App).use(live2d).mount('#app')
//使用
<live2d-v3><live2d-v3>
0.2.0更新
添加新的属性来控制live2d
本次更新主要因为人物不能移动和大小控制而作配置。其实本质上就是对position的几个属性做配置
属性
| 属性名 | 参数说明 | | ---------------------- | ------------------------------ | | ModelWidth | 模型的宽度 String (如20px) | | ModelHeight | 模型的高度 String (如20px) | | TipWidth | 顶部提示语宽度 String (如20px) | | TipHeight | 顶部提示语高度 String (如20px) | | positionLeft | 模型的距离左侧的距离 String (就是模型的left) | | positionRight | 模型的距离右侧的距离 String (就是模型的right) | | positionTop | 模型的距离顶部的距离 String (就是模型的top) | | positionBottom | 模型的距离底部的距离 String (就是模型的bottom) | | toolLeft | icon距离底部的距离 String | | toolRight | icon的距离底部的距离 String | | toolTop | icon距离底部的距离 String | | toolBottom | icon距离底部的距离 String |
方法
| 方法 | 参数 | 参数说明 | | | 方法说明 | | --------------------------------- | --------------------- | -------------------------- | --------------------------- | ------------------------------------------------------------ | :---------------------------------- | | showMessage(text,timeout,priority) | text,timeout,priority | text 角色说话的内容 string | timeout 弹框持续时间 number | priority 说话内容的权重 权重高的内容会覆盖权重低的权重低的内容不会覆盖权重高的 | 角色说话内容弹框 | | loadRandModel | 无 | | | | 角色换肤 注意:有些角色只有一个皮肤 | | loadloadOtherModel | 无 | | | | loadloadOtherModel()更换角色 |
事件
| 事件名 | 参数 | 参数说明 | 事件说明 | 注意 | | ---------------------- | ----- | ------------------------------ | ---------------------- | ------------ | | live2dItemClick(index) | index | index为当前icon的索引 从0 开始 | 点击当前icon时触发 | 别忘了加icon | | live2dItemEnter(index) | index | index为当前icon的索引 从0 开始 | 鼠标进入当前icon时触发 | |
放icon的地方
:clasName Array 这是一个数组 数组里面存放icon
举个例子
<live2d @live2dItemClick="live2dItemClick" @live2dItemEnter="live2dItemEnter" ref="aaa" :className="className"></live2d>
live2dItemClick(index) {
//第一个icon被点击时触发
if (index === 0) {
this.$refs.aaa.loadOtherModel();
}
if(index === 1){
this.$refs.aaa.loadRandModel();
}
},
live2dItemEnter(index) {
this.$refs.aaa.showMessage('我是live2d', 2000, 1000);
}
className
以font-awesome为例子
className: ['fa fa-lg fa-times', 'fa fa-lg fa-info-circle']
github
keywords
live2d