20mk-utils

公共组件

---

目录

一、cartoonMan组件（卡通人物组件）
二、roundMenu组件 （圆形浮动菜单）
三、container组件（窗体容器）
四、cacheOperate组件（浏览器缓存操作）
五、markdown组件（md浏览组件）
六、mdEditor组件（md实时预览组件）
七、printer组件（打印机特效组件）
八、qrcode组件（二维码生成组件）

---

组件在packages目录下开发

在src目录下写示例

编译出上传npm 组件包 使用

npm run lib

组件包发布到npm

1、需要先登录账号,如果没有账号，先到官网注册 地址：https://www.npmjs.com/signup 注册成功后，打开终端，输入以下命令登录

npm login

2、发布包

npm publish

每次发布的时候必须修改package.json中的version版本号，不然无法发布

如果要创建一个package，可以使用命令

npm run cpack packageName    #packageName 为要创建的包组件名称，命名规则是字母都为小写，单词与单词之间使用-来连接，或者就一个单词

一、cartoonMan组件（卡通人物组件）

该组件是用来创建一个卡通人物,使用该组件需要安装包npm i uuid -S

<cartoonMan :width="600" :height="600" :modelData="mdata" @on-move="handleMove" :index="0" />

width 属性为人物宽度，值为数字，默认值为300
height 属性为人物高度，值为数字，默认值为300
modelData 属性为引入的模型文件参数，必须是在服务器上放置的文件，且必须同源不可跨域
on-move 属性为控制模型活动的重要入口函数，其返回一个live2dModel对象实例，用于实际控制模型活动
index 属性为同一个页面创建多个cartoonMan时必填，值为数字。默认值为0

api说明

modelData 模型文件参数，示例：

mdata: {
    name: "Epsilon2.1", // 模型名称
    model: "/api/assets/Epsilon2.1/Epsilon2.1.moc", // 模型文件地址
    textures: [
            "/api/assets/Epsilon2.1/Epsilon2.1.2048/texture_00.png", // 材质素材地址
    ]
}

on-move 控制模型活动，示例：

handleMove(live2dModel) {
    live2dModel.setParamFloat(part_name, value) //value 可取值 0～1，-1～1，-30～30
}

part_name 部位名称，如果使用官方提供的人物模型，可选的值有以下这些：

PARAM_ANGLE_X
PARAM_ANGLE_Y
PARAM_ANGLE_Z
PARAM_EYE_L_OPEN
PARAM_EYE_L_SMILE
PARAM_EYE_R_OPEN
PARAM_EYE_R_SMILE
PARAM_EYE_BALL_X
PARAM_EYE_BALL_Y
PARAM_BROW_L_Y
PARAM_BROW_R_Y
PARAM_BROW_L_X
PARAM_BROW_R_X
PARAM_BROW_L_ANGLE
PARAM_BROW_R_ANGLE
PARAM_MOUTH_FORM
PARAM_MOUTH_OPEN
PARAM_CHEEK
PARAM_BREATH
PARAM_HAIR_FRONT
PARAM_HAIR_SIDE
PARAM_HAIR_BACK

二、roundMenu组件 （圆形浮动菜单）

该组件是浮动在页面最顶端的一个功能型菜单

<roundMenu animated :main="main" :menus="menus" :clockwise="false" theme="primary" @on-open="open"/>

theme 属性为菜单的主题色，值为string，默认红色，可选值：dark（黑色）、info（灰色）、warning（橙色）、success（绿色）、primary（蓝色）
animated 属性为菜单加载时是否动画进入，没有值，默认无动画；添加该属性则有动画
clockwise 属性为按钮排列顺序，值为boolean，默认值false表示逆时针排序；true为顺时针
position 属性为菜单位置，值为string，默认值为"right:40px;bottom:48%;" 菜单按钮在右下角
main 属性为主按钮定义信息，默认值为"{title: '意见箱', icon: 'el-icon-edit'}"，title表示鼠标悬停显示的提示，icon表示按钮的图标
menus 属性为主按钮周围围绕着的菜单按钮，值为array，每个菜单按钮的定义信息和main一样，title和icon
on-open 属性为菜单按钮点击后触发的事件

api示例

export default class roundMenuDemo extends Vue {
    main: any = {title: '设置', icon: 'el-icon-s-tools'}
    menus: any = [
      {title: '相机', icon: 'el-icon-camera-solid'},
      {title: '消息', icon: 'el-icon-message-solid'},
      {title: '分享', icon: 'el-icon-share'},
      {title: '退出', icon: 'el-icon-switch-button'}
    ]
    open(val: any) {
      alert(`${val.title} 按钮被点击了`)
    }
}

三、container组件（窗体容器）

该组件是一个窗体外壳，实现最大化和关闭，还有拖拽

<container :visible="isVisible" @on-close="close">
    这是一个窗口
</container>

visible 属性为是否显示窗体，值为boolean，默认值false，表示不显示
title 属性为窗体名称，值为string
isTop 属性为窗体是否在最顶层，值为boolean，默认值false，表示不在顶层
width 属性为窗体宽度，值为number，默认值为600
height 属性为窗体高度，值为number，默认值为300
on-close 属性为关闭窗体时触发的事件

api示例

export default class containerDemo extends Vue {
    isVisible: boolean = true
    close() {
        this.isVisible = false
    }
}

四、cacheOperate组件（浏览器缓存操作）

该组件定义了浏览器的缓存操作方法，分别可以操作cookie和storage

<cacheOperate @on-init="init"/>

on-init 属性为组件初始化时触发的事件，返回cache对象
cache对象包含cookie、localStorage、sessionStorage属性，分别有set、get、del方法

api示例

export default class cacheOperateDemo extends Vue {
  init(cache: any) {
    cache.cookie.set('name', 'Alice', 1)
    cache.localStorage.set('name', 'Maker')
    cache.sessionStorage.set('name', 'Tom')
  }

}

五、markdown组件（md浏览组件）

该组件用来浏览markdown文件，使用该组件需要安装包npm i showdown -S和npm i highlight.js -S

<markdown :content="content"/>

content 属性为md文本，值为string

六、mdEditor组件（md实时预览组件)

该组件用来浏览markdown文件，使用该组件需要安装包npm i showdown -S和npm i highlight.js -S

<mdEditor @on-save="saveEvent"/>

on-save 属性为点击保存按钮触发的事件，返回json数据，包含了title和content

api示例

saveEvent(val: any) {
  console.log(val) //{title:'', content: ''}
}

七、printer组件（打印机特效组件）

该组件是实现打印机特效

<printer>
  <p style="color:red;">无论你是科学家、企业家还是将军</p>
  <p style="color:blue;">所有人都应该扪心自问,现在可以做些什么</p>
  <p style="color:grey;">才能提升未来人工智能趋利避害的可能性。</p>
  <p>这是这个时代最重要的对话。</p>
</printer>

ident 属性为标识，值为string，默认值print， 如果需要同时使用多个该组件的话需要定义ident，且不能重名
speed 属性为打字速度，值为string，默认值medium，表示中速，可选值有slow（慢速）、medium（中速）、fast（快速）
delayed 属性为延时时间，值为number，默认值0，单位为秒

api示例

<printer ident="well" speed="fast" :delayed="2">
  <p style="color:red;">无论你是科学家、企业家还是将军</p>
  <p style="color:blue;">所有人都应该扪心自问,现在可以做些什么</p>
  <p style="color:grey;">才能提升未来人工智能趋利避害的可能性。</p>
  <p>这是这个时代最重要的对话。</p>
</printer>

八、qrcode组件（二维码生成组件）

该组件生成二维码

<qrcode :width="100" :margin="2" content="http://www.baidu.com"/>

width 属性为二维码大小，值为number，默认值200
margin 属性为边框宽度，值为number，默认值1
content 属性为要生成二维码的内容，值为string，默认值http://20mk.cn