Vue使用L2Dwidget

1、在根文件index.html中引入live2dw/lib/L2Dwidget.min.js

下载模型的文件，放在本地或者cdn

切换不同的模型
模型地址：https://github.com/xiazeyu/live2d-widget-models

showLive2d(name: String) {
      var live2dWidget = document.querySelector("#live2d-widget");
      if (live2dWidget) {
        live2dWidget.remove();
        // window.L2Dwidget.config = null;
        // window.L2Dwidget.destroy();
        // window.L2Dwidget.removeChild();
      } else {
        console.error("Live2D widget element not found");
      }
      // 配置文件官方API: https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
      var config = {
        model: {
          jsonPath: "", // xxx.model.json 的路径
        },
        display: {
          position: "right", //看板娘的表现位置left
          width: 200, //宽度
          height: 250, //高度
          hOffset: 255, //h偏移
          vOffset: 155,//v偏移
        },
        tagMode: false,
        debug: false,
        mobile: {
          show: true, // 是否在移动设备上显示
          scale: 1, // 移动设备上的缩放
          motion: true, // 移动设备是否开启重力感应
        },
        react: {
          opacityDefault: 1, // 默认透明度
          opacityOnHover: 1, // 鼠标移上透明度
        },
      };

      config.model.jsonPath =
        你的本地地址或者线上地址 + "/live2dw/live2d-widget-model-" +
        name +
        "/assets/" +
        name +
        ".model.json";
      console.log("[ config.model.jsonPath ] >", name, config.model.jsonPath);

      try {
        window.L2Dwidget.config.model.jsonPath = config.model.jsonPath;//必须得改这里，否则修改模型地址不改变
      } catch (error) {}
      setTimeout(() => {
        window.L2Dwidget.init(config);
      }, 100);
		// 注释掉的 是百度的例子
      // setTimeout(() => {
      //   window.L2Dwidget.init({
      //     model: {
      //       jsonPath:
      //         "https://yjy.yiyiny.com/static/live2dw/live2d-widget-model-" +
      //         name +
      //         "/assets/" +
      //         name +
      //         ".model.json",
      //       scale: 1,
      //       hHeadPos: 0.5,
      //       vHeadPos: 0.618,
      //     },
      //     dialog: {
      //       enable: true,
      //       script: {
      //         //每20s，显示一言（调用一言Api返回的句子）
      //         "every idle 20s": "$hitokoto$",
      //         "hover div": "星星在天上而你在我心里 (*/ω＼*)",
      //         //触摸到身体
      //         "tap body": "害羞⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄",
      //         //触摸到头部
      //         "tap face": "~~",
      //       },
      //     },
      //     mobile: { show: true, scale: 0.5 },
      //     display: {
      //       superSample: 2,
      //       width: 200,
      //       height: 400,
      //       position: "right",
      //       hOffset: 0,
      //       vOffset: 0,
      //     },
      //     react: { opacityDefault: 0.7, opacityOnHover: 0.2 },
      //     name: {
      //       canvas: "Live2dCanvas1",
      //     },
      //   });
      // }, 1000);
      // window.L2Dwidget.init({
      //   //对人物的属性配置
      //   // pluginRootPath: "../live2dw/", //人物文件夹的位置
      //   // pluginJsPath: "lib/",
      //   // pluginModelPath: "live2d-widget-model-shizuku/assets/",
      //   model: {
      //     jsonPath:
      //       "https://yjy.yiyiny.com/static/live2dw/live2d-widget-model-" +
      //       name +
      //       "/assets/" +
      //       name +
      //       ".model.json",
      //   },
      //   dialog: {
      //     enable: true, //是否开启对话框
      //     hitokoto: true,
      //     script: {
      //       //每20s，显示一言（调用一言Api返回的句子）
      //       // "every idle 20s": "$hitokoto$",
      //       // //触摸到class='star'对象,将会展示的文字
      //       // "hover .star": "星星在天上而你在我心里 (*/ω＼*)",
      //       //触摸到身体
      //       "tap body": "害羞⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄",
      //       //触摸到头部
      //       "tap face": "人家是在认真写博客哦--前端妹子",
      //     },
      //   },
      //   display: {
      //     //人物的属性配置
      //     superSample: 2,
      //     position: "left",
      //     width: 150,
      //     height: 500,
      //     hOffset: 200, // 横向偏移
      //     vOffset: 200, // 纵向偏移
      //   },
      //   mobile: {
      //     show: false, //是否在移动端展示
      //     scale: 0.5, //t透明度
      //   },
      // });
    },