hw-vue-components

汉卫研究院公共vue组件库

安装

yarn add hw-vue-components
或
npm i hw-vue-components -S

引入hw-vue-components

在 main.js 中写入以下内容：

import Vue from 'vue';
import HwVueComponents from 'hw-vue-componenst';
import App from './App.vue';

Vue.use(HwVueComponents);

new Vue({
  el: '#app',
  render: h => h(App)
});

组件

BasicLayout 基础布局组件

Attribute(属性)

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | logo | 项目logo | string | -- | -- | | title | 标题(必选参数) | string | -- | -- | | navList | 菜单集合(必选参数) | array | -- | [] | | width | 左侧菜单宽度 | number | -- | 250 | | userName | 用户名(必选参数) | string | -- | -- | | userImg | 用户头像 | string | -- | -- | | onUpdatePwd | 修改密码操作(必选参数) | function | -- | -- | | onExit | 登出操作(必选参数) | function({oldUserPwd: string, newUserPwd: string}) | -- | -- |

Slot(插槽)

| name | 说明 | | --- | --- | | headerLeft | 顶部左侧全部内容 | | headerLeftItem | 顶部左侧添加内容 | | headerRight | 顶部右侧全部内容 | | headerRightItem | 顶部右侧添加内容 | | fullScreen | 右侧全屏按钮 | | dropdown | 右侧下拉列表内容 | | dropdownItem | 右侧下拉列表添加选择项 |

基础布局组件分为两种，第二种为使用方法和第一种布局一样。

Login 登录页面组件

Attribute(属性)

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | title | 标题(必选参数) | string | -- | 后台管理系统 | | logo | 登录页面logo | string | -- | -- | | bgImg | 登录页面背景图(必选参数) | string | -- | -- | | codeImg | 验证码图片(必选参数) | string | -- | -- | | formValue | 登录表单(必选参数， 需配合.sync 修饰符) | object | -- | -- | | formRules | 登录校验规则 | object | -- | 用户名密码验证码必填校验 | | loading | 登录按钮的loading状态 | boolean | -- | false | | on-login | 登录时的回调(必选参数) | function({userName: string, password: string, code: string}) | -- | -- | | on-refresh-code | 验证码刷新时的回调(必选参数) | function() | -- | -- |

Slot(插槽)

| name | 说明 | | --- | --- | | formItem | 登录页面表单其他表单字段添加 | | bottomItem | 表单底部内容添加 |

404页面组件

Attribute(属性)

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | notFoundImg | 404图片(必选参数) | string | -- | -- | | on-back | 返回事件 | function | -- | -- |

用户管理页面组件

Attribute(属性)

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | loading | 页面加载状态 | boolean | -- | false | | pageNo | 当前页(需配合.sync 修饰符) | number | -- | 1 | | pageSize | 每页条数(需配合.sync 修饰符) | number | -- | 10 | | total | 总条数 | number | -- | 0 | | showDialog | 是否显示对话框(需配合.sync 修饰符) | boolean | -- | false | | queryForm | 查询表单数据(需配合.sync 修饰符) | object | -- | {} | | submitForm | 对话框表单数据(需配合.sync 修饰符) | object | -- | {} | | queryHandle | 列表查询事件 | function | -- | -- | | dataDictionary | 数据字典 | array,object | -- | -- | | size | 页面表单和按钮尺寸 | string | medium/small/mini | mini | | isShowDept | 是否显示组织选项 | boolean | -- | mini | | roleList | 角色列表数据 | array | -- | [] | | userList | 用户列表数据(必选参数) | array | -- | [] | | deptTree | 组织树数据 | array | -- | [] | | deptData | 组织数据 | array | -- | [] | | submitFormRules | 表单校验规则 | object | -- | 内部定义的默认校验 |

Events(事件)

| 事件名称 | 说明 | 回调参数 | | --- | --- | --- | | addHandle | 点击编辑按钮的回调 | -- | | modifyHandle | 点击编辑按钮的回调 | 用户列表当前行的数据 | | submitFormHandle | 点击提交按钮的回调 | 表单类型(add：新增，modify：编辑) | | deleteHandle | 点击删除按钮的回调 | 用户列表当前行的数据 |

Slot(插槽)

| name | 说明 | | --- | --- | | queryFormBox | 查询表单内容 | | queryForm | 查询表单项内容 | | queryFormItem | 在当前表单项后续添加内容 | | bntList | 当前页面操作列表集合 | | btnListItem | 后续操作按钮添加 | | table | 当前页table内容 | | dialog | 当前页弹窗内容 | | dialogFooter | 弹出框底部按钮内容 |

角色管理页面组件

Attribute(属性)

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | loading | 页面加载状态 | boolean | -- | false | | pageNo | 当前页(需配合.sync 修饰符) | number | -- | 1 | | pageSize | 每页条数(需配合.sync 修饰符) | number | -- | 10 | | total | 总条数 | number | -- | 0 | | showDialog | 是否显示对话框(需配合.sync 修饰符) | boolean | -- | false | | queryForm | 查询表单数据(需配合.sync 修饰符) | object | -- | {} | | submitForm | 对话框表单数据(需配合.sync 修饰符) | object | -- | {} | | queryHandle | 列表查询事件 | function | -- | -- | | dataDictionary | 数据字典 | array,object | -- | -- | | size | 页面表单和按钮尺寸 | string | medium/small/mini | mini | | roleList | 角色列表数据 | array | -- | [] | | menuTree | 菜单树结构数据 | array | -- | [] | | roleSelectMenu | 当前角色选中的菜单权限 | array | -- | [] | | submitFormRules | 表单校验规则 | object | -- | 内部定义的默认校验 |

Events(事件)

| 事件名称 | 说明 | 回调参数 | | --- | --- | --- | | addHandle | 点击编辑按钮的回调 | -- | | modifyHandle | 点击编辑按钮的回调 | 用户列表当前行的数据 | | submitFormHandle | 点击提交按钮的回调 | -- | | deleteHandle | 点击删除按钮的回调 | 用户列表当前行的数据 |

Slot(插槽)

| name | 说明 | | --- | --- | | queryFormBox | 查询表单内容 | | queryForm | 查询表单项内容 | | queryFormItem | 在当前表单项后续添加内容 | | bntList | 当前页面操作列表集合 | | btnListItem | 后续操作按钮添加 | | table | 当前页table内容 | | dialog | 当前页弹窗内容 | | dialogFooter | 弹出框底部按钮内容 |

菜单管理页面组件

Attribute(属性)

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | loading | 页面加载状态 | boolean | -- | false | | showDialog | 是否显示对话框(需配合.sync 修饰符) | boolean | -- | false | | queryForm | 查询表单数据(需配合.sync 修饰符) | object | -- | {} | | submitForm | 对话框表单数据(需配合.sync 修饰符) | object | -- | {} | | queryHandle | 列表查询事件 | function | -- | -- | | dataDictionary | 数据字典 | array,object | -- | -- | | size | 页面表单和按钮尺寸 | string | medium/small/mini | mini | | iconList | 图标列表数据 | array | -- | [] | | menuData | 菜单数据 | array | -- | [] | | menuTree | 菜单树结构数据 | array | -- | [] | | menuOptions | 菜单下拉选项 | array | -- | [] | | submitFormRules | 表单校验规则 | object | -- | 内部定义的默认校验 |

Events(事件)

| 事件名称 | 说明 | 回调参数 | | --- | --- | --- | | addHandle | 点击编辑按钮的回调 | 用户列表当前行的数据 | | modifyHandle | 点击编辑按钮的回调 | 用户列表当前行的数据 | | submitFormHandle | 点击提交按钮的回调 | -- | | deleteHandle | 点击删除按钮的回调 | 用户列表当前行的数据 |

Slot(插槽)

| name | 说明 | | --- | --- | | queryFormBox | 查询表单内容 | | queryForm | 查询表单项内容 | | queryFormItem | 在当前表单项后续添加内容 | | bntList | 当前页面操作列表集合 | | btnListItem | 后续操作按钮添加 | | table | 当前页table内容 | | dialog | 当前页弹窗内容 | | dialogFooter | 弹出框底部按钮内容 |

额外配置

因菜单需要，菜单icon要额外配置，引入如下icons文件夹：

icons文件夹在pc基础模板中配有

vue.config.js配置svg-sprite-loader

module.exports = {
  // ...
  chainWebpack: (config) => {
    // 设置全局svg
    config.module.rule(`svg`).exclude.add(resolve(`src/assets/icons`)).end();
    config.module
      .rule(`icons`)
      .test(/\.svg$/)
      .include.add(resolve(`src/assets/icons`))
      .end()
      .use(`svg-sprite-loader`)
      .loader(`svg-sprite-loader`)
      .options({
        symbolId: `icon-[name]`,
      })
      .end();
  },
  // ...
};

svg-sprite-loader：用法及说明

组织管理页面组件

Attribute(属性)

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | loading | 页面加载状态 | boolean | -- | false | | showDialog | 是否显示对话框(需配合.sync 修饰符) | boolean | -- | false | | queryForm | 查询表单数据(需配合.sync 修饰符) | object | -- | {} | | submitForm | 对话框表单数据(需配合.sync 修饰符) | object | -- | {} | | downloadHref | 导出地址 | string | -- | {} | | dataDictionary | 数据字典 | array,object | -- | -- | | queryHandle | 列表查询事件 | function | -- | -- | | size | 页面表单和按钮尺寸 | string | medium/small/mini | mini | | deptData | 组织数据 | array | -- | [] | | deptTree | 组织树结构 | array | -- | [] | | submitFormRules | 表单校验规则 | object | -- | 内部定义的默认校验 |

Events(事件)

| 事件名称 | 说明 | 回调参数 | | --- | --- | --- | | addHandle | 点击编辑按钮的回调 | 用户列表当前行的数据 | | modifyHandle | 点击编辑按钮的回调 | 用户列表当前行的数据 | | submitFormHandle | 点击提交按钮的回调 | -- | | deleteHandle | 点击删除按钮的回调 | 用户列表当前行的数据 | | exportHandle | 点击导出按钮的回调 | -- |

Slot(插槽)

| name | 说明 | | --- | --- | | queryFormBox | 查询表单内容 | | queryForm | 查询表单项内容 | | queryFormItem | 在当前表单项后续添加内容 | | bntList | 当前页面操作列表集合 | | btnListItem | 后续操作按钮添加 | | table | 当前页table内容 | | dialog | 当前页弹窗内容 | | dialogFooter | 弹出框底部按钮内容 |

字典管理页面组件

Attribute(属性)

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | loading | 页面加载状态 | boolean | -- | false | | pageNo | 当前页(需配合.sync 修饰符) | number | -- | 1 | | pageSize | 每页条数(需配合.sync 修饰符) | number | -- | 10 | | total | 总条数 | number | -- | 0 | | showDialog | 是否显示对话框(需配合.sync 修饰符) | boolean | -- | false | | queryForm | 查询表单数据(需配合.sync 修饰符) | object | -- | {} | | submitForm | 对话框表单数据(需配合.sync 修饰符) | object | -- | {} | | dataDictionary | 数据字典 | array,object | -- | -- | | queryHandle | 列表查询事件 | function | -- | -- | | size | 页面表单和按钮尺寸 | string | medium/small/mini | mini | | submitFormRules | 表单校验规则 | object | -- | 内部定义的默认校验 |

Events(事件)

| 事件名称 | 说明 | 回调参数 | | --- | --- | --- | | addHandle | 点击编辑按钮的回调 | -- | | modifyHandle | 点击编辑按钮的回调 | 用户列表当前行的数据 | | submitFormHandle | 点击提交按钮的回调 | 表单类型(add：新增，modify：编辑) | | deleteHandle | 点击删除按钮的回调 | 用户列表当前行的数据 |