th-vue-component

v2.1.6

Published

4 years ago

th-vue-component

0High
0Medium
0Low

ywzhou

vue element-ui component-ui th-vue-component

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

文档 DEMO

本库主要包含基础组件、工具类、主题样式

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中引入资源（方式二）

CDN项目

<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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

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

全局导入（方式一）

html中引入资源（方式二）

指令说明

基础组件

自动注册属性

校验匹配规则

Form表单校验规则

日期时间插件

数组类型及长度判断

序列化

对象深拷贝

文件下载 by Blob文件流

文件下载 by 网络地址

内容复制

本地存储

公共样式、主题样式切换

公共样式

扩展el-icon

自定义element-ui主题

主题样式变量

主题定义和切换