vuepress-plugin-pixi-live2d-display

1.0.2 • Public • Published

vuepress pixi-live2d-display插件

感谢vuepress-plugin-cat给的灵感

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

仅支持新版本的模型!

预览

预览DEMO

安装

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文件
  • enhanceAppFilevuepress运行时注入一个支持设定propsvue文件
  • live2d.vue 显示组件
  • lib/index.jshtml内注入所需的第三方js
  • lib/*.js 第三方js,实际上未使用

传参的魔改原理

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

魔改vue文件的propsdefault属性

参考

Readme

Keywords

Package Sidebar

Install

npm i vuepress-plugin-pixi-live2d-display

Weekly Downloads

1

Version

1.0.2

License

MIT

Unpacked Size

2.34 MB

Total Files

12

Last publish

Collaborators

  • mizuka