gemini-mo-ui

gemini-mo-ui介绍

基于vue2.0、element-ui的组件库

使用指南

$3

``npm
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` 的兼容

$3

- 🎉 更多按钮（mo-btn-d1）

$3

- ✨ 顶部导航栏显示版本号
- ✨ 新增日志页面，查看版本更新内容

$3

#### 更多按钮（mo-btn-g1）

- 🐛 修复按钮class初始化报错的bug

$3

- 🎉 更多按钮（mo-btn-b1）

$3

- 🎉 更多按钮（mo-btn-b2）
- 🎉 更多按钮（mo-btn-b3）

$3

- 🎉 更多按钮（mo-btn-b4）

$3

- 🎉 更多按钮（mo-btn-b5）

$3

- ⚡ 优化了更多按钮（mo-btn-b4）的样式
- ⚡ 优化了瀑布流容器（mo-waterfall）的初始化逻辑，避免无意义的报错

$3

- ⚡ 优化了多行输入框（mo-textarea）的样式