vue-live2d-reveal 基于live2d与vue的网页看板娘

安装

npm i vue-live2d-reveal

引用

import vueLive2d from 'vue-live2d-reveal'

使用

Vue.use(vueLive2d,{ 
  //cdn:'',//安装live2d组件cdn,已有默认无需配置，后续开放自行配置
  version: 2,//live2d资源包版本，目前有2和3两个版本 版本取决于live2d 导出后的版本。默认版本为2
})

组件引入

 <template>
  <div id="app">
    <vue-live-2d :drag="drag" :live2dConfig="live2dConfig" :size="size" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      drag: false,
      live2dConfig: {
        characterPath:
        'https://cdn.jsdelivr.net/gh/Volcanione/live2Dmodel/2.0/model/bilibili-live/33/index.json'
      },
       size:{
         width: 400,
         height: 600	
       }
    }
  }
}
</script>

配置说明

drag:[Boolean] 是否开启全屏浮动拖拽。结合实际情况使用
size：{width: 400, height: 600}看板娘实际大小尺寸
live2dConfig:{
	characterPath： 'https://cdn.jsdelivr.net/gh/Volcanione/live2Dmodel/2.0/model/bilibili-live/33/index.json'//live2d资源CDN路径,不能使用本地文件路径 具体设置请参考live2d sdk文档

}详细配置