Hw-vue-components NPM

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文件夹：

avatar

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	点击删除按钮的回调	用户列表当前行的数据