vue中使用看板娘-全是妹妹（坏笑）

vue使用看板娘，使用Live2D引入看板娘效果（请看左下角那个小妹妹~~~）示例环境：vue-cli4**如有资源目录不同，请按照版本对应的资源目录使用**首先需要下载看板娘的文件资源下载地址：链接：https://pan.baidu.com/s/121eOpQQK94Me-j4hQalwuA提取码：6mv3放置目录位置如下全局引入（public => index....

Heinrich's_Law

2792人浏览 · 2020-03-23 09:56:25

Heinrich's_Law · 2020-03-23 09:56:25 发布

vue使用看板娘，使用Live2D引入看板娘

效果（请看左下角那个小妹妹~~~）

在这里插入图片描述

示例环境：vue-cli4

**如有资源目录不同，请按照版本对应的资源目录使用**

首先需要下载看板娘的文件资源

下载地址：
链接：https://pan.baidu.com/s/121eOpQQK94Me-j4hQalwuA
提取码：6mv3

放置目录位置如下

全局引入（public => index.html => script => src => http://src => custom_code）

在这里插入图片描述

/public/index.html => <head>  </head>

  <script src="./libs/live2dw/lib/L2Dwidget.min.js"></script>

初始化看板娘的代码

 window.L2Dwidget.init({
   "model": {
     jsonPath: "./libs/live2dw/live2d-widget-model-shizuku/assets/shizuku.model.json",
     "scale": 1
   },
   "display": {
     "position": "left",
     "width": 150,
     "height": 300,
     "hOffset": 0,
     "vOffset": -20,
     zIndex: -1
   },
   "mobile": {
     "show": true,
     "scale": 0.5
   },
   "react": {
     opacity: 0.5,
     "opacityDefault": 0.2,
     "opacityOnHover": 0.2
   }
 });

参数说明

model 模型的配置

json 文件资源路径，可以支持网络路径，此处使用的是相对路径

scale 模型缩放系数

display 模型布局

position 位置

width 宽度

height 高度

hOffset 水平偏移量

vOffset 垂直偏移量

mobile 移动端配置

show 显示/隐藏

scale 缩放比例

react 模型矩形框样式

opacity 透明度

opacityDefault 默认透明度

opacityOnHover 鼠标悬浮透明度

之前搞了一个公众号：大壮计算机科学与技术。闲置很久了，没什么用户，就是分享下日常和技术帖子，大家捧捧场。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^