20mk-utils 中文文档教程
### 公共组件 --- > 目录 >> [一、cartoonMan组件（卡通人物组件）](#cartoonMan) >> [二、roundMenu组件 （圆形浮动菜单）](#roundMenu) >> [三、container组件（窗体容器）](#container) >> [四、cacheOperate组件（浏览器缓存操作）](#cacheOperate) >> [五、markdown组件（md浏览组件）](#markdown) >> [六、mdEditor组件（md实时预览组件）](#mdEditor) >> [七、printer组件（打印机特效组件）](#printer) >> [八、qrcode组件（二维码生成组件）](#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` `````` **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组件 （圆形浮动菜单） 该组件是浮动在页面最顶端的一个功能型菜单 `````` **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组件（窗体容器） 该组件是一个窗体外壳，实现最大化和关闭，还有拖拽 ```这是一个窗口 ``` **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 `````` **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` `````` **content** 属性为md文本，值为string ### 六、mdEditor组件（md实时预览组件) 该组件用来浏览markdown文件，使用该组件需要安装包`npm i showdown -S`和`npm i highlight.js -S` `````` **on-save** 属性为点击保存按钮触发的事件，返回json数据，包含了title和content #### api示例 ``` saveEvent(val: any) { console.log(val) //{title:'', content: ''} } ``` ### 七、printer组件（打印机特效组件） 该组件是实现打印机特效 `````` **width** 属性为二维码大小，值为number，默认值200 **margin** 属性为边框宽度，值为number，默认值1 **content** 属性为要生成二维码的内容，值为string，默认值http://20mk.cn
无论你是科学家、企业家还是将军
所有人都应该扪心自问,现在可以做些什么
才能提升未来人工智能趋利避害的可能性。
这是这个时代最重要的对话。
无论你是科学家、企业家还是将军
所有人都应该扪心自问,现在可以做些什么
才能提升未来人工智能趋利避害的可能性。
这是这个时代最重要的对话。
更多
