vuepress pixi-live2d-display插件

感谢vuepress-plugin-cat给的灵感

因为我找了半天没有可以自定义live2d模型的插件，只能自己写了

仅支持新版本的模型！

预览

安装

npm i vuepress-plugin-pixi-live2d-display

or

yarn add vuepress-plugin-pixi-live2d-display

使用

在你的config.js中增加

module.exports = {
  plugins: [
      ['vuepress-plugin-pixi-live2d-display', { model: "你的模型地址" }]
  ]
}

其他参数

| 属性 | 类型 | 必填 | 默认 | 说明 | |----------------|---------|-------|-------|----------------------------------------------------------------------| | containerStyle | Object | false | {} | 给整个容器的样式，默认为右下角400 x 400的方框 | | model | String | true | null | model3.json的地址 | | mobile | boolean | false | false | 是否在手机上显示 | | offsetX | number | false | 0 | 模型位置偏移，根据模型实际尺寸来，可能很大 | | offsetY | number | false | 0 | 模型位置偏移，根据模型实际尺寸来，可能很大 | | delay | number | false | 2000 | 受限于引入依赖库的问题，需要延迟加载模型，延迟的时间，建议至少大于1s | | scale | number | false | 1 | 模型缩放 |

开发

实现原理

挂载了一个Live2d.vue放在右下角来加载live2d的模型文件，内部使用pixi-live2d-display实现

文件说明

• index.js 主入口，加载插件，包含加载lib和挂载全局的vue文件
• enhanceAppFile 向vuepress运行时注入一个支持设定props的vue文件
• live2d.vue 显示组件
• lib/index.js 向html内注入所需的第三方js
• lib/*.js 第三方js,实际上未使用

传参的魔改原理

官方文档没找到如果正确给ui组件传参数，所以魔改了一个，具体代码看enhanceAppFile和index.js内引用enhanceAppFile的方式

魔改vue文件的props的default属性

参考

• vuepress-plugin-cat
• pixi-live2d-display