1.0.2 • Published 3 years ago
vuepress-plugin-pixi-live2d-display v1.0.2
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内注入所需的第三方jslib/*.js第三方js,实际上未使用
传参的魔改原理
官方文档没找到如果正确给ui组件传参数，所以魔改了一个，具体代码看enhanceAppFile和index.js内引用enhanceAppFile的方式
魔改vue文件的props的default属性