基于element-ui封装的公共组件库
- 本库主要包含基础组件、工具类、主题样式
npm i element-ui -S npm i th-vue-component -S
全局导入（方式一）
import ThVueComponent from 'th-vue-component'
import 'th-vue-component/lib/theme/index.css'
import 'th-vue-component/lib/th-vue-component.css'
Vue.use(ThVueComponent)- 配置
module.exports = {
chainWebpack: config => {
// 别名
config.resolve.alias
.set('@@', resolve('node_modules/th-vue-component/src'))
.set('variable', resolve('node_modules/th-vue-component/src/assets/theme/src/common/variable.scss'))
},
transpileDependencies: [
'th-vue-component/src'
]
}html中引入资源（方式二）
<head>
<link type="text/css" rel="stylesheet" href="http://localhost:5500/cdn/js/th-vue-component/2.0.21/th-vue-component.css">
<link type="text/css" rel="stylesheet" href="http://localhost:5500/cdn/js/th-vue-component/2.0.21/theme/index.css">
<script src="http://localhost:5500/cdn/js/vue/2.6.11/vue.min.js" type="text/javascript"></script>
<script src="http://localhost:5500/cdn/js/element-ui/2.13.2/lib/index.js" type="text/javascript"></script>
<script src="http://localhost:5500/cdn/js/th-vue-component/2.0.21/th-vue-component.umd.js" type="text/javascript"></script>
<script src="http://localhost:5500/cdn/js/xlsx-style/0.8.13/xlsx.full.min.js" type="text/javascript" async=""></script>
<script src="http://localhost:5500/cdn/js/xlsx/0.15.6/xlsx.full.min.js" type="text/javascript" async=""></script>- 配置
module.exports = {
chainWebpack: config => {
// 别名
config.resolve.alias
.set('@@', resolve('node_modules/th-vue-component/src'))
.set('variable', resolve('node_modules/th-vue-component/src/assets/theme/src/common/variable.scss'))
// 排除打包
if (process.env.NODE_ENV === 'production') {
config.externals({
'th-vue-component': 'th-vue-component'
})
}
},
transpileDependencies: [
'th-vue-component/src'
]
}指令说明
# 安装依赖
npm run pre
# 启动DEMO开发模式
npm run dev
# 打包组件
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-tooltip></th-tooltip> - 标签输入框:
<th-textarea-tags></th-textarea-tags> - 树型输入框:
<th-input-tree></th-input-tree> - 时间线:
<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-export-excel导出组件需要将node_modules/th-vue-component/public/cdn/xlsx复制到项目的public/cdn/目录下
自动注册属性
校验匹配规则
- this.$validate
Form表单校验规则
- this.$rules
日期时间插件
- this.$moment
数组类型及长度判断
- this.$length
序列化
- this.$util.serialize
对象深拷贝
- this.$util.deepClone
文件下载 by Blob文件流
- this.$util.download
文件下载 by 网络地址
- this.$util.downloadByUrl
内容复制
- 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