20mk-utils

20mk工具包

Usage no npm install needed!

<script type="module">
  import 0mkUtils from 'https://cdn.skypack.dev/20mk-utils';
</script>

README

公共组件


目录

一、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 -Snpm i highlight.js -S

<markdown :content="content"/>

content 属性为md文本,值为string

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

该组件用来浏览markdown文件,使用该组件需要安装包npm i showdown -Snpm 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