0.3.1 • Published 1 year ago
ttzxh-vue-live2d v0.3.1
使用方法
npm i ttzxh-vue-live2d
import Vue from 'vue'
import App from './App.vue'
import live2d from 'ttzxh-vue-live2d'
import live2dcss from '../node_modules/ttzxh-vue-live2d/dist/ttzxh-vue-live2d.css'
Vue.use(live2d)
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
0.3.0
1 year ago
0.3.1
1 year ago
0.2.7
3 years ago
0.2.1
3 years ago
0.2.0
3 years ago
0.2.6
3 years ago
0.2.3
3 years ago
0.2.2
3 years ago
0.2.5
3 years ago
0.2.4
3 years ago
0.1.9
4 years ago
0.1.8
4 years ago
0.1.7
4 years ago
0.1.4
4 years ago
0.1.3
4 years ago
0.1.6
4 years ago
0.1.5
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago