``` npm install ```
npm install gemini-mo-uinpm
npm install gemini-mo-ui
`
$3
`npm
npm uninstall gemini-mo-ui
npm install gemini-mo-ui
`
$3
在 main.js 中添加以下内容:
`js
import MOUI from 'gemini-mo-ui'
import 'gemini-mo-ui/lib/moui.css'
Vue.use(MOUI);
`
$3
`js
console.log(this.$StringUtil.generateUUID())
`
开发指南
$3
`
https://gitee.com/dong_wen_mo/gemini-mo-ui.git
`
$3
`
0.代码开发
1.修改package.json文件的version
2.更新readme
3.提交代码
4.npm run lib
5.npm publish
`
$3
定义组件时,使用以下四类,描述组件信息
| 标题 | 含义 |
| ---------- | ---------- |
| Attributes | 属性 |
| Events | 自定义事件 |
| Methods | 用户事件 |
| Slots | 插槽 |
升级日志
$3
| 图标 | 代码 | 说明 |
| ---- | --------------------------- | ---------------------------- |
| 🎉 | :tada: | 组件初次提交 |
| ✨ | :sparkles: | 组件引入新特性 |
| 🐛 | :bug: | 修复bug |
| ⚡ | :zap: | 优化逻辑 |
| 🎨 | :art: | 改进样式 |
| 📝 | :memo: | 撰写文档 |
| ♻ | :recycle: | 代码美化 |
| 💥 | :boom: | 引入重大变化(非兼容性更新) |
| 🚩 | :triangular_flag_on_post: | 版本升级 |
$3
组件库的版本号采用major.minor.patch的形式,具体含义如下:
| 名称 | 含义 | 变化说明 |
| ----- | ---------- | ------------------------------------------------------------ |
| major | 主版本号 | 通常意味着组件库发生了巨大变化,比如体系结构的重新设计,组件库的重新设计等等 |
| minor | 次版本号 | 通常反映一些较大的改动,例如新增一个组件,或某个组件产生巨大变化,或非兼容性更新 |
| patch | 修补版本号 | 修复漏洞、组件优化、或一些小的改动(从0开始计数) |
$3
#### 新组件
- 🎉 信息按钮(mo-info-btn)
- 🎉 斜角按钮 (mo-angle-btn)
- 🎉 搜索按钮(mo-search-btn)
- 🎉 块容器(mo-block)
- 🎉 主要容器(mo-main)
- 🎉 全屏按钮(mo-full-screen)
- 🎉 复制按钮(mo-copy)
- 🎉 主要导航(mo-main-header、mo-main-nav-item、mo-main-nav-divider)
- 🎉 次要导航(mo-sub-header、mo-sub-nav-item、mo-sub-nav-divider)
- 🎉 边栏标题(mo-sidebar-header)
- 🎉 代码块(mo-code)
- 🎉 右键菜单(mo-contextmenu、mo-contextmenu-item)
- 🎉 多行输入框(mo-textarea)
- 🎉 可编辑表格(mo-edit-table)
#### 工具类
- 🎉 字符串工具类 StringUtil
$3
- 🐛 修复了信息按钮禁用时,指针样式不变化的bug
$3
- 🐛 修复了信息按钮样式显示bug
$3
#### 新组件
- 🎉 代码块容器(mo-block-code)
#### mo-main-nav-item
- 💥 将“主要导航”组件名,由(mo-main-nav)修改为(mo-main-header)
- 💥 删除 active 属性
- ✨ 新增 name 属性,用于高亮
#### mo-sub-nav-item
- 💥 删除 active 属性
- ✨ 新增 name 属性,用于高亮
#### mo-code
- ✨ 引入 highlight.js
- ✨ 新增 width 属性,用于设置宽度
- ✨ 新增 maxWidth 属性,用于设置最大宽度
- ✨ 新增 height 属性,用于设置高度
- ✨ 新增 maxHeight 属性,用于设置最大高度
- ✨ 新增 lang 属性,用于设置code语法
$3
#### 新组件
- 🎉 主要容器(左右)(mo-main-lr)
- 🎉 描述信息(mo-text-dscr)
$3
#### mo-text-dscr
- 🐛 修复了文本超出容器不换行的bug
$3
#### 新组件
- 🎉 输入框(mo-input)
$3
#### 新工具类
- 🎉 字符处理($StringUtil)
- 🎉 全屏处理($ScreenUtil)
- 🎉 数字处理($MathUtil)
- 🎉 日期处理($DateUtil)
$3
#### $MathUtil
- 🐛 删除了日志打印
$3
#### mo-input
- 🎨 修改placeholder的颜色为 #c0c4cc
$3
#### mo-edit-table
- 🐛 修复了在某些情况下,空值属性不存在的bug
- 🎨 修改了焦点移入后的样式
$3
#### 新组件
- 🎉 代码编辑器(mo-code-edit)
#### mo-table-edit
- 💥 将“可编辑表格”组件名,由(mo-edit-table)修改为(mo-table-edit)
$3
#### mo-code-edit
- ✨ 新增语法高亮 sql 、xml
- ✨ 新增主题 dreamweaver、chrome、chaos、solarized_light、tomorrow_night_eighties
- 🎨 修改了全屏时的样式
- 🎨 修改了滚动条的样式
- ✨ 修改了 lang 和 theme 的默认值
- ✨ 删除了 max-lines 属性
$3
#### 新组件
- 🎉 富文本编辑器(mo-text-edit)
#### mo-code-edit
- 🐛 删除切换全屏状态时的日志打印
- ✨ 修改了 theme 的默认值为 tomorrow_night_eighties
$3
#### mo-main-header
- ✨ 添加右上角用户信息的点击事件@click-user
$3
#### mo-main-header
- ✨ @click-user 添加 $event 参数
$3
#### mo-contextmenu
- ✨ 给左键监听加一个200毫秒的延迟,以满足特殊需求
- ⚡ 优化了菜单在临近页面边界时的显示
$3
#### 新组件
- 🎉 瀑布流布局容器(mo-waterfall、mo-waterfall-item)
#### mo-contextmenu
- ⚡ 优化了菜单在临近页面边界时的显示(底部)
$3
#### mo-code-edit
- ✨ 新增语法高亮对 ftl 文件的适配
$3
#### $DateUtil
- 🐛 修复了格式化日期时,月和分钟的格式化错误
- ✨ 新增方法 getMonthFirstDay(date) 获取日期所在月份的第一天
- ✨ 新增方法 getMonthLastDay(date) 获取日期所在月份的最后一天
- ✨ 新增方法 getYearFirstDay(date) 获取日期所在年的第一天
- ✨ 新增方法 getYearLastDay(date) 获取日期所在年的最后一天
$3
#### 新组件
- 🎉 数字滚动(mo-number-scroll)
$3
#### $StringUtil
- 🐛 修复了getWidth()造成系统异常的BUG
$3
#### mo-code-edit
- ✨ 增加了对只读属性readonly的监听,可以动态切换
$3
#### 新组件
- 🎉 表格工具栏(mo-table-toolbar、mo-table-toolbar-item、mo-table-toolbar-divider)
- 🎉 按钮工具栏(mo-btn-toolbar、mo-btn-toolbar-item、mo-btn-toolbar-divider)
#### $MathUtil
- ✨ 新增方法$MathUtil.randomByRange(start, end);返回一个随机整数,范围在[start,end)之间
$3
#### mo-text-dscr
- 🎨 文字颜色由 #666 修改为 #333
$3
#### mo-contextmenu
- 📝 将说明文档中的 ref="contentmenu" 修改为 ref="contextmenu"
$3
#### 新组件
- 🎉 markdown编辑器(mo-markdown-edit)
#### mo-code-edit
- 📝 修复了文档描述不准确的问题
- ✨ 增加了对自动换行 auto-wrap 的监听,可以动态切换
$3
#### mo-input
- ✨ 增加获取焦点方法 focus()
- ✨ 增加移除焦点方法 blur()
#### mo-code-edit
- ⚡ 优化了编辑器全屏时,关闭按钮会遮挡文字的问题
$3
#### mo-input
- 🎨 恢复鼠标样式为默认值 cursor: text
$3
#### mo-text-area
- ✨ 增加获取焦点方法 focus()
- ✨ 增加移除焦点方法 blur()
- 🎨 修改复制、清空按钮的样式,使之不遮挡文字
$3
#### mo-code-edit
- ✨ 增加获取焦点方法 focus()
- ✨ 增加移除焦点方法 blur()
#### mo-markdown-edit
- ✨ 增加获取焦点方法 focus()
- ✨ 增加移除焦点方法 blur()
$3
#### $DateUtil
- 🐛 修复了小时的格式错误,由 h 更正为 H
$3
#### mo-number-scroll
- ✨ 增加了 默认插槽,可以通过插槽自定义显示内容,需要通过 @change 事件获取当前值
- ✨ 增加了 @change 事件,在父页面获取当前值,或配合默认插槽使用
$3
#### 新组件
- 🎉 自适应容器(mo-row、mo-col)
#### base.css
- ✨ 对 .innerbox4 .innerbox5 添加 overflow: auto; 属性
$3
#### 新组件
- 🎉 时钟(mo-clock-a1)
- 🎉 倒计时(mo-countdown)
$3
#### $StringUtil
- ✨ 新增方法 boolean $StringUtil.copy(String text),复制 text 到剪贴板,返回复制是否成功
$3
#### mo-row
- ✨ 新增样式 flex: 1;
$3
#### 新工具类
- 🎉 自定义工具($MoUtil)
#### $MoUtil
- ✨ 新增方法 Object this.$MoUtil.clone(Object para) js对象深拷贝
$3
#### 新工具类
- 🎉 lodash工具($Lodash)
#### $Lodash
- ✨ 引入 npm install lodash 插件
- 💥 废弃 $MoUtil 工具类
$3
- ✅ 提交测试版
$3
#### 新组件
- 🎉 标签(mo-label)
#### 重大变化
- 💥 恢复了 $MoUtil 工具类
- 💥 废弃了 $Lodash 工具类
- 🐛 修复了 $MoUtil.clone() 方法中,克隆对象中的对象时属性丢失的bug
$3
#### mo-label
- ✨ 新增 value-align 属性,用于设置内容区域的对齐方式
$3
#### base.css
- ✨ 对 .innerbox-none 添加 overflow: auto; 属性
#### mo-main-nav-item
- ✨ 新增 title 属性,导航标题,在插槽为空时生效
#### mo-sub-nav-item
- ✨ 新增 title 属性,导航标题,在插槽为空时生效
$3
#### mo-text-dscr
- 🎨 删除了组件的 margin-top: 20px; 样式
- ✨ 新增演示文档
$3
#### mo-main-lr
- ✨ 新增 default 插槽,用于自定义显示内容
$3
#### mo-main-header
- ✨ 新增 full-screen-btn 属性,控制全屏按钮是否显示
- ✨ 新增 search-btn 属性,控制搜索按钮是否显示
- ✨ 新增 user-btn 属性,控制用户登录按钮是否显示
$3
#### mo-sub-header
- 🐛 修复了当导航过多时,样式溢出的bug
#### mo-sub-nav-item
- ✨ 新增 @close 回调事件,当点击关闭按钮或鼠标中键单击时触发,返回传入的 item 属性
- ✨ 新增 item 属性,用于 @close 事件的回调参数
$3
#### mo-sub-nav-item
- ✨ 新增 compare 属性,用于判断导航在何时高亮显示
$3
#### mo-block-code
- 🐛 修复了动态改变样式时,不能动态渲染的bug
$3
#### mo-text-dscr
- ✨ 新增 type 属性,类型
- ✨ 新增 size 属性,尺寸
- ✨ 新增 strong 属性,文字是否加粗
$3
#### mo-text-edit
- ✨ 优化组件,监听参数实时渲染
$3
#### margin.css
- 🎉 新增 margin.css 用于通过 class 设置 margin 样式
$3
#### margin.css
- 🐛 修复 margin.css 样式显示不正确的bug
$3
#### mo-code
- ✨ text 属性支持 Object 类型
$3
#### mo-code
- ✨ text 属性改变实时渲染
$3
#### 新组件
- 🎉 时间线(mo-timeline、mo-timeline-item)
$3
#### $MoUtil
- ✨ 新增方法 void this.$MoUtil.open(String url) 打开新页面
$3
#### $StringUtil
- ✨ 新增方法 String this.$StringUtil.hump2line(String text) 驼峰转下划线
- ✨ 新增方法 String this.$StringUtil.line2hump(String text) 下划线转驼峰
$3
#### 新组件
- 🎉 密码输入框(mo-input-pwd)
#### base.css
- ✨ 新增样式 multi-line-hidden 多行文本隐藏(两行)
- ✨ 新增样式 cursor-move 鼠标样式为小手
$3
#### mo-input-pwd
- ⚡ 优化了在输入框无内容时,不显示图标
$3
#### 新组件
- 🎉 菜单栏(mo-menubar)
$3
#### mo-menubar
- 🐛 修复了一级菜单没有子菜单时样式错误的bug
$3
#### 新组件
- 🎉 Cron表达式生成器(mo-cron)
$3
#### 新组件
- 🎉 弹出层(mo-modal)
$3
#### 新组件
- 🎉 更多按钮(mo-btn-g1)
$3
#### 新组件
- 🎉 更多按钮(mo-btn-c1)
$3
#### mo-text-edit
- 🐛 修复了只读时也能删除图片的bug
- ✨ 新增属性 uploadRequest 用于自定义上传图片
$3
#### mo-text-edit
- 🐛 修复了动态改变只读状态时,无法渲染工具栏的bug
$3
#### mo-menubar
- 🐛 修复了动态改变只读状态时,无法渲染工具栏的bug
$3
#### 新组件
- 🎉 更多按钮(mo-btn-c2)
$3
#### mo-text-edit
- ✨ 新增方法 focus() 用于获取焦点
$3
#### 新组件
- 🎉 更多按钮(mo-btn-c3)
$3
#### mo-code-edit
- ✨ 属性 height 的类型增加对 String` 的兼容