educiot-common

educiot-common
2,195
vue educiot-common
Install
npm install educiot-common
Latest Version:1.9.3
License:MIT
Last Updated:Jul 21, 2022
Links: npm
Maintainer: hz91213

edu-common

基于elment-ui的二次开发，将常用的部分进行封装，节约开发时间
主要用于后台管理系统开发，包含表格（table），筛选（filter），分页（page）

table-vue(表格组件)

参数

参数 类型 必传 说明 默认值
list Array 是 数据 []
tabs Array 是 表格字段 []
spanMethod Function 否 合并单元格 -
hi Number 否 浏览器高度减去hi得到table高度 300
rowKey String 否 树形数据row-key id
childKey String 否 树形数据children children
hasKey String 否 树形数据hasChildren hasChildren
checkKey String 否 checkbox的绑定属性的key checked
radioCheck Object 否 单选按钮选中值 {val: ''}
open Boolean 否 是否展开树结构 false
page Number 否 当前页 1
size Number 否 每页条数 10
showHead Boolean 否 是否展示头部 true
tabs元素格式
参数 类型 必传 说明
name string 是 th所展示名称
key String||Funciotn（a,b） 否 td的值，为string类型时为数据字段名，
funciont类型时scope.row,scope.$index)
可以是一段html
w Number 否 表格宽度
alg String 否 对齐方式，默认center
st Boolean 否 当内容过长被隐藏时显示 tooltip
ope Array 否 操作栏的按钮合计
rel Boolean 否 td内容是否为按钮
clk Boolean 否 td内容是否可点击
child Array 否 子表头
check Boolean 否 是否是checkbox
radio Boolean 否 是否是radio
checks Array||Funciotn（a,b） 否 多选框组
sort boolean,string 否 是否排序
ope格式
参数 类型 必传 说明
name String 是 按钮文字内容
trends Boolean 否 动态加载
need Function(a,b) 否 动态加载的条件
type String 否 按钮类型，默认text
checks格式
参数 类型 必传 说明
name String 否 checkbox的名称
id String || Number 否 checkbox的值
dis Boolean 否 禁用

事件

事件 说明 返回值
check td中的button点击事件 {btn: o,data: d},o:当前按钮对象，d：当前tr数据
checks td中多选框组change事件 object,当前tr值
boxCheck td中多选框change事件 {val: 当前状态, data: tr数据}
checkRadio td中多选框change事件 object,当前tr值
sort 表格排序事件 {column, prop, order}

方法

this.$refs[自定义的ref].getChecks()

方法 说明 返回值
getChecks 获取当前列表中选中的项 选中项的数组

filter-vue(筛选组件)

参数

参数 类型 是否必传 说明
list Array 是 筛选控件列表
params Object 是 筛选所涉及的参数合集
list示例

[ { ​ name: '搜索', ​ list: [{name: '输入名称', type: 'input', key: 'query'}] },{ ​ name: '过滤', ​ list: [{name: '选择发布时间', type: 'time', key: 'time', col: 4}] } ]

参数list中元素的list详细字段
参数 类型 是否必传 说明
name String 是 placeholde值或者按钮展示内容
type String 是 控件类型：input | button |buttons| select|time | times | label |tree(select聚焦弹窗)
key String 是 params中对应的key
col Number 是 el-col中的 span属性
options Array 否 type为select时的下拉列表
group boolean 否 option是否分组
child String 否 group为true时分组option的集合
label String 否 option的label，默认‘name’
value String 否 option的value，默认‘id’
plain boolean 否 朴素按钮
before string 否 表单前文案
props object 否 日期选择的options
clear boolean 否 select是否可以清空

事件

事件 说明 返回值
filBtn button点击事件 当前按钮信息
show 类型为tree触发事件 true

page-vue（页码组件）

参数

参数 类型 说明 默认值
page Number 页数 1
size Number 每页条数 10
total Number 总条数 0

事件

事件 说明 返回数据
action 页码切换事件 当前页

page-head（页面头部组件）

参数

参数 类型 说明 默认值
title String 标题 育联网柔性智造平台
user Object 登录信息 {sn: '演示学校',account: 'admin'}
bgc String 背景色 #002fa7

dialog-vue（弹窗组件）

参数

参数 类型 说明 默认值
title String 标题 ‘’
body Boolean 是否插入body 10
show Boolean 展示 false
width String 宽度 50%
btns Boolean 是否展示底部按钮 true
btncls Boolean 是否展示取消按钮 true
clstext String 取消按钮文案 取消
savetext String 保存按钮文案 确定
textalg String 底部按钮位置 right
close Boolean 右上角关闭按钮 true
modal Boolean 点击modal关闭 true
escape Boolean 点击esc关闭 true
destroys Boolean 关闭销毁弹窗 false

事件

事件 说明 返回数据
hide 关闭弹窗事件 false
save 确定按钮点击事件 true

crumbs-vue（面包屑组件）

参数

参数 类型 说明 默认值
list Array 数据 []
hasmb Boolean 底部是否有边界值 true
origin String 域名 测试环境

list参数

参数 类型 说明
name String 名称
path String 本地路由
href（与path只能存在一个） String 外部链接

form-vue（form表单）

参数

参数 类型 说明 默认值
list Array 表单列表 无
data Object 表单绑定得值 无
width String label-width 80px
position String label位置 left
size string 表单大小 -

list参数

参数 类型 说明
name String label名称或btn名称
type String 类型：list,input,select,radio,check,button,
switch,time,upimg,upfile,tree,editopt,number,cascader
key String data中对应得key
lx String input、button、time得type类型
options Array select、radio、check得子集
label String options中对象绑定得key，默认值id
value String options中展示得key，默认值name
width Number 上传图片盒子得宽度
height Number 上传图片盒子得高度
namekey String 附件名称的key
list Array type为list时控件集合，内容与父级相同
reg object input输入正则表达式（过滤满足正则内容）
disabled Boolean 禁用
props object 组件的配置项

插槽（slot）

<template v-slot:[key]></template>

事件

事件 说明 返回数据
btnClick btn点击事件 当前btn数据
upload 上传事件 {f:file对象,d: 当前上传控件数据}
show type为tree时聚焦事件 当前对象数据
editopt type为editopt时，选项的编辑事件 当前选项
deleopt type为editopt时，选项的删除事件 当前选项
selectVal type为select时，组件change事件 {val:当前值,data:当前对象}
setCas type为cascader是，组件change事件 {val: 当前选项,data: 当前对象}
onblur input失焦事件 {event: event, data: 当前对象}

例子：

list:[ {name: '姓名',type: 'input',key: 'name',max: 5,must: true},

​ {name: '头像',type: 'upimg',key: 'img',width: 150,height: 150},

​ {name: '性别',type: 'radio',key: 'sex',options: [{name: '女',id: 0},{name: '男',id: 1}]},

​ {name: '籍贯',type: 'select',key: 'city',options:[{name: '中国',id: 0},{name: '外国',id: 1}]},

​ {name: '性格',type: 'list',list: [{name: '选择性格',type: 'select',key: 'nature',options: [{name: '外向',id: 0},{name: '内向',id: 1}]},{name: '添加性格+',type: 'button'}]},

​ {name: '简介',type: 'input',key: 'guite',max: 200,lx: 'textarea'},

​ {name: '附件',type: 'upfile',key: 'url',namekey: 'fn'}]

data: {fn: '',sex: '', img: '',name: '',city: '',guite: '',nature: '',}

Related Packages

vue

The progressive JavaScript framework for building modern web UI.

588,019,132 54,801
vue
@vueuse/shared
372,738,348 22,398
vue utils vue-use
@vueuse/core

Collection of essential Vue Composition Utilities

367,188,523 22,398
vue utils vue-use
@vitejs/plugin-vue

The official plugin for Vue SFC support in Vite.

333,357,380 686
vue vite vite-plugin
eslint-plugin-vue

Official ESLint plugin for Vue.js

266,364,830 4,591
vue eslint eslint-config eslint-plugin rules vuejs

Version History

Version Released License
1.9.3 MIT
1.9.2 MIT
1.9.1 MIT
1.9.0 MIT
1.8.9 MIT