live2d-vue3

基于vue的简单强大的live2d模型
703 3
vue3 live2d waifu
Install
npm install live2d-vue3
Latest Version:0.3.1
Vue:3
Last Updated:Apr 5, 2022
Links: GitHub  ·  npm
Maintainer: ttzxh

使用方法

	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

Related Packages

live2d-vuenext
764
live2d
vue-live2d

一个适用于 Vue 2 和 Vue 3 项目的 Live2D 看板组件

2,016 166
live2d vue vue-live2d
vitepress-theme-website

vitepress plugin for website

1,857 20
live2d plugin theme vitepress waline
vuepress-plugin-helper-live2d

VuePress集成Live2D看板娘. Live2D plugin for VuePress.

6,789 43
live2d helper-live2d vue vuepress vuepress-plugin yilia-plus 看板娘
markdown-to-jsx

A very fast and versatile markdown toolchain. AST, React, React Native, SolidJS,...

214,042,213 2,394
vue3 html jsx markdown markdown parser preact react react-native solid solidjs +2

Version History

Version Released Vue License
0.3.1 ^3.0.0
0.3.0 ^3.0.0
0.2.0 ^3.0.0
0.1.8 ^3.0.0
0.1.7 ^3.0.0