基于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'
  })

一、指令说明

# 安装依赖
npm install

# 启动DEMO开发模式
npm run dev

# 打包DEMO
npm run build:demo

# 发布DEMO
npm run deploy:demo

# 启动文档服务
npm run dev:docs

# 打包文档服务
npm run build:docs

# 发布文档服务
npm run deploy:docs

# 打包组件
npm run build

# 打包样式
npm run build:theme

# 发布（npm adduser && npm login）
npm run deploy

二、基础组件

• 表格: <th-table></th-table>
• 分页: <th-pagination></th-pagination>
• 表单: <th-form></th-form>
• 表单标题: <th-form-title></th-form-title>
• 搜索套件: <th-search></th-search>
• 标签页: <th-tabs></th-tabs>
• 下拉选择: <th-select></th-select>
• 下拉菜单: <th-dropdown></th-dropdown>
• 导出表格: <th-export-excel></th-export-excel>
• 导入表格: <th-import-excel></th-import-excel>
• 文件上传: <th-file-upload></th-file-upload>
• 图标: <th-icon></th-icon>
• 链接: <th-link></th-link>
• 气泡: <th-popover></th-popover>
• 标签输入框: <th-textarea-tags></th-textarea-tags>
• 时间线: <th-timeline></th-timeline>
• 图片预览: <th-viewer></th-viewer>
• 主题切换: <th-theme></th-theme>
• 403: <th-error-403></th-error-403>
• 404: <th-error-404></th-error-404>
• 500: <th-error-500></th-error-500>

三、业务组件

• 设备选择器: <th-equiment></th-equiment>
• 短信通知查询: <th-sms></th-sms>
• 台区选择器: <th-tg-select></th-tg-select>
• 工单约时: <th-arrang-time></th-arrang-time>
• 工单督办: <th-supervise></th-supervise>

四、图表组件

• 圆饼分类图: <th-echarts-pie-category/>
• 简化圆饼分类图: <th-echarts-pie-category2/>
• 圆环形进度条: <th-echarts-ring-progress/>
• 多环进度条: <th-echarts-multi-ring/>
• 水球图: <th-echarts-water-polo/>
• 曲线图带渐变区域: <th-echarts-line-area/>
• 曲线图: <th-echarts-line/>
• 曲线柱形双轴图: <th-echarts-line-bar/>
• 柱形分类图: <th-echarts-bar-category/>
• 横向柱形进度条: <th-echarts-bar-progress/>
• 3d地图: <th-echarts-map3d/>
• 2d地图: <th-echarts-map2d/>

五、自动注册属性

校验匹配规则

• 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文件

// 从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文件:

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

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

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