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