live2d-vue3

使用方法

	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