[JavaScript知识库]live2d在vue中的运用

live2d在vue中的运用:

1.首先先下载live2d的安装包
链接：https://pan.baidu.com/s/1Ay3Tk3sZInHHwqpBkBHP7w
提取码：zjsk
2.将下载好的安装包解压到static下

3.在上一级目录中的index.html文件中加标签

文件地址一定要对应!!!

<script type="text/javascript" src="./static/live2dw/lib/L2Dwidget.min.js"></script>

4.再在App.vue中添加代码

文件地址一定要对应，不同的文件地址可以选择不同的老婆!

   /*看板娘初始化
      参数说明
      model 模型的配置
         json 文件资源路径，可以支持网络路径，此处使用的是相对路径
         scale 模型缩放系数
      display 模型布局
         position 位置
         width 宽度
         height 高度
         hOffset 水平偏移量
         vOffset 垂直偏移量
      mobile 移动端配置
         show 显示/隐藏
         scale 缩放比例
      react 模型矩形框样式
         opacity 透明度
         opacityDefault 默认透明度
         opacityOnHover 鼠标悬浮透明度
    */
mounted() {
    setTimeout(() => {
      window.L2Dwidget.init({
        pluginRootPath: '../static/live2dw/',
        pluginJsPath: 'lib/',
        pluginModelPath: 'live2d-widget-model-haru_2/assets/', //中间这个haru_2就是你的老婆,想换个老婆,换这个就可以了
        tagMode: false,
        debug: false,
        model: { jsonPath: '../static/live2dw/live2d-widget-model-haru_2/assets/haru02.model.json' },
        display: { position: 'right', width: 400, height: 900 },  //调整大小,和位置
        mobile: { show: true },   //要不要盯着你的鼠标看
        log: false,
      })
    }, 1)
  }

对应的*.model.json文件中可以修改声音等属性

5.大功告成