## 安装
```
npm install zr-admin-ui
```

## 导入
```js

// main.js 中引入 
import zrAdminUI from 'zr-admin-ui'
Vue.use(zrAdminUI)

```

# 简介
## ZR-AdminUI 是什么？
ZR-AdminUI是基于VUE+ElmentUI框架，为了便于项目高效开发，并保持一致性与标准化进行二次封装形成的前端技术框架；将ZR产品开发资源进行优化与汇总，目的是为了提升代码复用率与稳定性形成ZR自有的前端框架。
特点：
* 代码统一维护与更新，无论是有经验的开发人员或初级前端开发人员，能够快速构建项目
* 代码高度组件化，复用率高，避免重复造轮子，减少冗余及低效代码
* 参考文档及时更新，让开发人员能快速查找与参阅
* 主流前端框架VUE+ElementUI封装，学习成本低、稳定高效
* 多套UI风格可选，满足不同类型项目开发所需
* 组件不断迭代更新，根据项目需求及时迭代优化

## 前序准备
你需要在本地安装 [node](http://caibaojian.com/nodejs/) 和 [git](http://git.p2hp.com/)。本项目技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui，提前了解和学习这些知识会对使用本项目有很大的帮助。

本项目的定位是后台集成方案，仅适合PC端管理后台开发。因为本框架包含多种基础框架，请确保使用前对如下框架有所学习与了解:
- 前端框架：[Vue.js](https://cn.vuejs.org/)
- UI框架：[Element](https://element.eleme.cn/#/zh-CN)
- 集成方案：[vue-element-admin](https://panjiachen.github.io/vue-element-admin-site/zh/)

## 说明文档
官方文档地址 [ZR-AdminUI](http://39.101.69.208:8007/docs/documents/guide/info.html)。

## 框架统计

| 组件名称       | 说明       |
| :----------- |:-------------|
| ZrButton      | 按钮组 |
| ZrFormGroup      | 分组表单 |
| ZrForm      | Form表单 |
| ZrFormLine      | 表单分割线 |
| ZrFormItemGroup      | 表单分组Group |
| ZrTips      | 提示文本 |
| ZrTable      | Table表格 |
| ZrSearchBox      | 综合搜索 |
| ZrButtonBox      | 操作按钮 |
| ZrInfo      | 信息展示区 |
| ZrInfoBox      | 综合信息展示 |
| ZrDrawer      | 抽屉 | string |
| ZrTransition      | 动画 |
| ZrRadio      | 单选按钮组 |
| ZrCheckbox      | 多选按钮 |
| ZrCheckboxGroup      | 多选按钮组 |
| ZrCitySelect      | 城市选择 |
| ZrMap      | 地图选择 |
| ZrNearRadio      | 近期选择器（单选） |
| ZrNearInput      | 近期选择器（自定义） |
| ZrNearSelect      | 近期选择器（多选） |
| ZrErrorPages      | 错误页面 |
| ZrBrowserPages      | 浏览器版本提示 |
| ZrElInputNumber      | 数字输入框 |
| ZrCard      | 卡片 |
| ZrDialog      | Dialog对话框 |
| ZrTree      | Tree树组件 |
| ZrTabs      | Tabs菜单 |
| ZrSelectIcon      | 字体图标选择组件 |
| ZrLineChart      | 折线图 |
| ZrBarChart      | 柱状图 |
| ZrPieChart      | 饼状图 |
| ZrFunnelChart      | 数据漏斗 |
| ZrSwiperGroup      | 商品详情轮播图 |

## 过滤器filters
| 过滤器名称       | 说明       |
| :----------- |:-------------|
| trim      | 去除字符串空格 |
| upDigit      | 数字转换为大写金额 |
| filterDateTime      | 转化时间格式 年月日  时分秒 |
| filterDate      | 转化时间格式 年月日 |
| numberToCurrencyNo      | 数字千分位格式化 |
| Tofixed      | 数字转化为两位小数 |

## 自定义指令directives
| 指令名称       | 说明       |
| :----------- |:-------------|
| copy      | 一键复制 |
| longpress      | 长按指令 |
| waterMarker      | 自定义水印 |

## 开源协议
ISC