vuepress-plugin-pixi-live2d-display

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