ttzxh-vue-live2d

    0.2.7 • Public • Published

    使用方法

    	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

    Install

    npm i ttzxh-vue-live2d

    DownloadsWeekly Downloads

    15

    Version

    0.2.7

    License

    none

    Unpacked Size

    238 kB

    Total Files

    6

    Last publish

    Collaborators

    • ttzxh