README
基于GIS2.0提供sdk包封装的公共组件库
包含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
}