live2d-vue3

0.2.0 • Public • Published

使用方法

	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

Package Sidebar

Install

npm i live2d-vue3

Weekly Downloads

5

Version

0.2.0

License

none

Unpacked Size

4.06 MB

Total Files

11

Last publish

Collaborators

  • ttzxh