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
属性