gemini-mo-ui介绍

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

使用指南

npm安装

npm install gemini-mo-ui

版本升级

npm uninstall gemini-mo-ui
npm install gemini-mo-ui

快速上手

在 main.js 中添加以下内容：

import MOUI from 'gemini-mo-ui'
import 'gemini-mo-ui/lib/moui.css'

Vue.use(MOUI);

工具类使用

console.log(this.$StringUtil.generateUUID())

开发指南

gitee地址

https://gitee.com/dong_wen_mo/gemini-mo-ui.git

开发步骤

0.代码开发
1.修改package.json文件的version
2.更新readme
3.提交代码
4.npm run lib
5.npm publish

说明

定义组件时，使用以下四类，描述组件信息

| 标题 | 含义 | | ---------- | ---------- | | Attributes | 属性 | | Events | 自定义事件 | | Methods | 用户事件 | | Slots | 插槽 |

升级日志

图标说明

| 图标 | 代码 | 说明 | | ---- | --------------------------- | ---------------------------- | | 🎉 | :tada: | 组件初次提交 | | ✨ | :sparkles: | 组件引入新特性 | | 🐛 | :bug: | 修复bug | | ⚡ | :zap: | 优化逻辑 | | 🎨 | :art: | 改进样式 | | 📝 | :memo: | 撰写文档 | | ♻ | :recycle: | 代码美化 | | 💥 | :boom: | 引入重大变化（非兼容性更新） | | 🚩 | :triangular_flag_on_post: | 版本升级 |

版本号说明

组件库的版本号采用major.minor.patch的形式，具体含义如下：

| 名称 | 含义 | 变化说明 | | ----- | ---------- | ------------------------------------------------------------ | | major | 主版本号 | 通常意味着组件库发生了巨大变化，比如体系结构的重新设计，组件库的重新设计等等 | | minor | 次版本号 | 通常反映一些较大的改动，例如新增一个组件，或某个组件产生巨大变化，或非兼容性更新 | | patch | 修补版本号 | 修复漏洞、组件优化、或一些小的改动（从0开始计数） |

v1.0.0

新组件

• 🎉 信息按钮（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

v1.0.1

• 🐛 修复了信息按钮禁用时，指针样式不变化的bug

v1.0.2

• 🐛 修复了信息按钮样式显示bug

v1.1.0

新组件

• 🎉 代码块容器（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语法

v1.2.0

新组件

• 🎉 主要容器（左右）（mo-main-lr）
• 🎉 描述信息（mo-text-dscr）

v1.2.1

mo-text-dscr

• 🐛 修复了文本超出容器不换行的bug

v1.3.0

新组件

• 🎉 输入框（mo-input）

v1.4.0

新工具类

• 🎉 字符处理（$StringUtil）
• 🎉 全屏处理（$ScreenUtil）
• 🎉 数字处理（$MathUtil）
• 🎉 日期处理（$DateUtil）

v1.4.1

$MathUtil

• 🐛 删除了日志打印

v1.4.2

mo-input

• 🎨 修改placeholder的颜色为 #c0c4cc

v1.4.3

mo-edit-table

• 🐛 修复了在某些情况下，空值属性不存在的bug
• 🎨 修改了焦点移入后的样式

v1.5.0

新组件

• 🎉 代码编辑器（mo-code-edit）

mo-table-edit

• 💥 将“可编辑表格”组件名，由（mo-edit-table）修改为（mo-table-edit）

v1.5.1

mo-code-edit

• ✨ 新增语法高亮 sql 、xml
• ✨ 新增主题 dreamweaver、chrome、chaos、solarized_light、tomorrow_night_eighties
• 🎨 修改了全屏时的样式
• 🎨 修改了滚动条的样式
• ✨ 修改了 lang 和 theme 的默认值
• ✨ 删除了 max-lines 属性

v1.6.0

新组件

• 🎉 富文本编辑器（mo-text-edit）

mo-code-edit

• 🐛 删除切换全屏状态时的日志打印
• ✨ 修改了 theme 的默认值为 tomorrow_night_eighties

v1.6.1

mo-main-header

• ✨ 添加右上角用户信息的点击事件@click-user

v1.6.2

mo-main-header

• ✨ @click-user 添加 $event 参数

v1.6.3

mo-contextmenu

• ✨ 给左键监听加一个200毫秒的延迟，以满足特殊需求
• ⚡ 优化了菜单在临近页面边界时的显示

v1.7.0

新组件

• 🎉 瀑布流布局容器（mo-waterfall、mo-waterfall-item）

mo-contextmenu

• ⚡ 优化了菜单在临近页面边界时的显示（底部）

v1.7.1

mo-code-edit

• ✨ 新增语法高亮对 ftl 文件的适配

v.1.7.2

$DateUtil

• 🐛 修复了格式化日期时，月和分钟的格式化错误
• ✨ 新增方法 getMonthFirstDay(date) 获取日期所在月份的第一天
• ✨ 新增方法 getMonthLastDay(date) 获取日期所在月份的最后一天
• ✨ 新增方法 getYearFirstDay(date) 获取日期所在年的第一天
• ✨ 新增方法 getYearLastDay(date) 获取日期所在年的最后一天

v1.8.0

新组件

• 🎉 数字滚动（mo-number-scroll）

v1.8.1

$StringUtil

• 🐛 修复了getWidth()造成系统异常的BUG

v1.8.2

mo-code-edit

• ✨ 增加了对只读属性readonly的监听，可以动态切换

v1.9.0

新组件

• 🎉 表格工具栏（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)之间

v1.9.1

mo-text-dscr

• 🎨 文字颜色由 #666 修改为 #333

v1.9.2

mo-contextmenu

• 📝 将说明文档中的 ref="contentmenu" 修改为 ref="contextmenu"

v1.10.0

新组件

• 🎉 markdown编辑器（mo-markdown-edit）

mo-code-edit

• 📝 修复了文档描述不准确的问题
• ✨ 增加了对自动换行 auto-wrap 的监听，可以动态切换

v1.10.1

mo-input

• ✨ 增加获取焦点方法 focus()
• ✨ 增加移除焦点方法 blur()

mo-code-edit

• ⚡ 优化了编辑器全屏时，关闭按钮会遮挡文字的问题

v1.10.2

mo-input

• 🎨 恢复鼠标样式为默认值 cursor: text

v1.10.3

mo-text-area

• ✨ 增加获取焦点方法 focus()
• ✨ 增加移除焦点方法 blur()
• 🎨 修改复制、清空按钮的样式，使之不遮挡文字

v1.10.4

mo-code-edit

• ✨ 增加获取焦点方法 focus()
• ✨ 增加移除焦点方法 blur()

mo-markdown-edit

• ✨ 增加获取焦点方法 focus()
• ✨ 增加移除焦点方法 blur()

v1.10.5

$DateUtil

• 🐛 修复了小时的格式错误，由 h 更正为 H

v1.10.6

mo-number-scroll

• ✨ 增加了 默认插槽，可以通过插槽自定义显示内容，需要通过 @change 事件获取当前值
• ✨ 增加了 @change 事件，在父页面获取当前值，或配合默认插槽使用

v1.11.0

新组件

• 🎉 自适应容器（mo-row、mo-col）

base.css

• ✨ 对 .innerbox4 .innerbox5 添加 overflow: auto; 属性

v1.12.0

新组件

• 🎉 时钟（mo-clock-a1）
• 🎉 倒计时（mo-countdown）

v1.12.1

$StringUtil

• ✨ 新增方法 boolean $StringUtil.copy(String text)，复制 text 到剪贴板，返回复制是否成功

v1.12.2

mo-row

• ✨ 新增样式 flex: 1;

v1.13.0

新工具类

• 🎉 自定义工具（$MoUtil）

$MoUtil

• ✨ 新增方法 Object this.$MoUtil.clone(Object para) js对象深拷贝

v1.14.0

新工具类

• 🎉 lodash工具（$Lodash）

$Lodash

• ✨ 引入 npm install lodash 插件
• 💥 废弃 $MoUtil 工具类

v1.14.1

• ✅ 提交测试版

v1.15.0

新组件

• 🎉 标签（mo-label）

重大变化

• 💥 恢复了 $MoUtil 工具类
• 💥 废弃了 $Lodash 工具类
• 🐛 修复了 $MoUtil.clone() 方法中，克隆对象中的对象时属性丢失的bug

v1.15.1

mo-label

• ✨ 新增 value-align 属性，用于设置内容区域的对齐方式

v1.15.2

base.css

• ✨ 对 .innerbox-none 添加 overflow: auto; 属性

mo-main-nav-item

• ✨ 新增 title 属性，导航标题，在插槽为空时生效

mo-sub-nav-item

• ✨ 新增 title 属性，导航标题，在插槽为空时生效

v1.15.3

mo-text-dscr

• 🎨 删除了组件的 margin-top: 20px; 样式
• ✨ 新增演示文档

v1.15.4

mo-main-lr

• ✨ 新增 default 插槽，用于自定义显示内容

v1.15.5

mo-main-header

• ✨ 新增 full-screen-btn 属性，控制全屏按钮是否显示
• ✨ 新增 search-btn 属性，控制搜索按钮是否显示
• ✨ 新增 user-btn 属性，控制用户登录按钮是否显示

v1.15.6

mo-sub-header

• 🐛 修复了当导航过多时，样式溢出的bug

mo-sub-nav-item

• ✨ 新增 @close 回调事件，当点击关闭按钮或鼠标中键单击时触发，返回传入的 item 属性
• ✨ 新增 item 属性，用于 @close 事件的回调参数

v1.15.7

mo-sub-nav-item

• ✨ 新增 compare 属性，用于判断导航在何时高亮显示

v1.15.8

mo-block-code

• 🐛 修复了动态改变样式时，不能动态渲染的bug

v1.15.9

mo-text-dscr

• ✨ 新增 type 属性，类型
• ✨ 新增 size 属性，尺寸
• ✨ 新增 strong 属性，文字是否加粗

v1.15.10

mo-text-edit

• ✨ 优化组件，监听参数实时渲染

v1.16.1

margin.css

• 🎉 新增 margin.css 用于通过 class 设置 margin 样式

v1.16.2

margin.css

• 🐛 修复 margin.css 样式显示不正确的bug

v1.16.3

mo-code

• ✨ text 属性支持 Object 类型

v1.16.4

mo-code

• ✨ text 属性改变实时渲染

v1.17.0

新组件

• 🎉 时间线（mo-timeline、mo-timeline-item）

v1.18.0

$MoUtil

• ✨ 新增方法 void this.$MoUtil.open(String url) 打开新页面

v1.19.0

$StringUtil

• ✨ 新增方法 String this.$StringUtil.hump2line(String text) 驼峰转下划线
• ✨ 新增方法 String this.$StringUtil.line2hump(String text) 下划线转驼峰

v1.20.0

新组件

• 🎉 密码输入框（mo-input-pwd）

base.css

• ✨ 新增样式 multi-line-hidden 多行文本隐藏（两行）
• ✨ 新增样式 cursor-move 鼠标样式为小手

v1.20.1

mo-input-pwd

• ⚡ 优化了在输入框无内容时，不显示图标

v1.21.0

新组件

• 🎉 菜单栏（mo-menubar）

v1.21.1

mo-menubar

• 🐛 修复了一级菜单没有子菜单时样式错误的bug

v1.22.0

新组件

• 🎉 Cron表达式生成器（mo-cron）

v1.23.0

新组件

• 🎉 弹出层（mo-modal）

v1.24.0

新组件

• 🎉 更多按钮（mo-btn-g1）

v1.25.0

新组件

• 🎉 更多按钮（mo-btn-c1）

v1.25.1

mo-text-edit

• 🐛 修复了只读时也能删除图片的bug
• ✨ 新增属性 uploadRequest 用于自定义上传图片

v1.25.2

mo-text-edit

• 🐛 修复了动态改变只读状态时，无法渲染工具栏的bug

v1.25.3

mo-menubar

• 🐛 修复了动态改变只读状态时，无法渲染工具栏的bug

v1.26.0

新组件

• 🎉 更多按钮（mo-btn-c2）

v1.26.1

mo-text-edit

• ✨ 新增方法 focus() 用于获取焦点

v1.27.0

新组件

• 🎉 更多按钮（mo-btn-c3）

v1.27.1

mo-code-edit

• ✨ 属性 height 的类型增加对 String 的兼容

v1.28.0

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

v1.28.1

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

v1.28.4

更多按钮（mo-btn-g1）

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

v1.29.0

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

v1.29.1

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

v1.29.2

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

v1.29.3

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

v1.29.4

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

v1.29.5

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