基于element-ui封装的公共组件库

文档
DEMO

- 包含element-ui所有原组件、封装的基础组件、功能性组件、工具类、主题样式类等

- 项目引用

> npm i th-pdiot-component-ui -S

``
/**
* 导入 th-pdiot-component-ui
*/
import ElementUI from 'th-pdiot-component-ui'
import 'th-pdiot-component-ui/lib/theme/index.css'
import 'th-pdiot-component-ui/lib/th-pdiot-component-ui.css'

Vue.use(ElementUI, {
size: 'mini',
menuType: 'text'
})
`

一、指令说明

` bash


安装依赖

`

二、基础组件

- 表格:
- 分页:
- 表单:
- 表单标题:
- 搜索套件:
- 标签页:
- 下拉选择:
- 下拉菜单:
- 导出表格:
- 导入表格:
- 文件上传:
- 图标:
- 链接:
- 气泡:
- 标签输入框:
- 时间线:
- 图片预览:
- 主题切换:
- 403:
- 404:
- 500:

三、业务组件

- 设备选择器:
- 短信通知查询:
- 台区选择器:
- 工单约时:
- 工单督办:

四、图表组件

- 圆饼分类图:
- 简化圆饼分类图:
- 圆环形进度条:
- 多环进度条:
- 水球图:
- 曲线图带渐变区域:
- 曲线图:
- 曲线柱形双轴图:
- 柱形分类图:
- 横向柱形进度条:
- 3d地图:
- 2d地图:

五、自动注册属性

校验匹配规则

- this.$validate

Form表单校验规则

- this.$rules

日期时间插件

- this.$moment

数组类型及长度判断

- this.$length

序列化

- this.$util.serialize

对象深拷贝

- this.$util.deepClone

文件下载

- this.$util.download

内容复制

- this.$util.copy

本地存储

- this.$localStore

六、公共样式、主题样式切换

公共样式

- src/assets/index.scss

扩展el-icon

- src/assets/font/iconfont.css

自定义element-ui主题

- src/assets/theme/src/index.scss

主题样式变量

- src/assets/theme/src/common/variable.scss

主题定义和切换

- src/mixins/color.js

Bugs

谷歌低版本报语法错误

- 即不支持es6语法，需要编译成es5语法的js文件

`js
// 从npm包导出function时正常
import th from 'th-pdiot-component-ui'
const {serialize} = th.util
const {getStore} = th.localStore

// 直接从npm包里的js文件导出function，报语法错误
import {serialize} from 'th-pdiot-component-ui/src/utils/util'
import {getStore} from 'th-pdiot-component-ui/src/utils/store'
`

解决方法：

- 新增babel.config.js文件:

`js
module.exports = {
presets: [
'@vue/app'
]
}
`

- 将instal方法里的注册对象移到export里。

`js
export default {
version: config.version,
install,
...components,
validate,
rules,
util,
localStore,
filters
}
``