Zj-Element
基于ElementUI的VUE组件——Жидзин(Zidjin)系列组件库。
安装
推荐使用 npm 的方式安装。
npm install element-ui
npm install zj-element
引入
全局引入,在 main.js 中写入以下内容:
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui'; // 引入ElementUI库,必须
import 'element-ui/lib/theme-chalk/index.css'; // 引入ElementUI样式,必须
// 如果希望使用自定义样式,建议改成引用element-ui.css
// import './static/css/element-ui.css'; // 引入ElementUI自定义样式,必选其一
import ZjElement from "zj-element"; // 引入ZjTianditu库
Vue.use(ElementUI); // 注册ElementUI,必须
Vue.use(ZjElement); // 注册ZjTianditu
new Vue({
el: '#app',
render: h => h(App)
});
局部引入,在 vue页面文件中写入以下内容
import {ZjForm, ZjTable, ZjDialog} from 'zj-element';
export default {
components: {
ZjForm,
ZjTable,
ZjDialog,
},
};
Zj-Table 表格
基于ElementUI的表格组件——Жидзин(Zidjin)系列组件库。
基本用法
<zj-table :table-header="tableHeader" :table-data="tableData"></zj-table>
<script>
import {ZjTable} from 'zj-element';
export default {
components: {
ZjTable,
},
data: ()=>({})
};
</script>
Zj-Table Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
table-header | 表头配置 | array | - | - |
table-data | 表格数据 | array | - | - |
height | 表格高度 | number | - | - |
config | 表格配置 | object | { // 空数据时显示的文本内容 emptyText: '暂无数据', //当内容过长被隐藏时显示 tooltip showOverflowTooltip: false, } |
- |
Table-Header Options
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | 单元格数据类型 | array | 'text', 'selection', select', 'image', 'button', ‘switch’,'time','download','expand','number' | - |
key | 键名 | string | - | - |
value | 值,列名 | string | - | - |
placeholder | 空占位符 | string | "-" | - |
tip | 鼠标移上提示。浏览器提示 | string | - | - |
sortable | 当前列是否支持排序 | boolean | true | false |
width | 列宽度。单位默认px | number | 100 | |
option | 选项。将传入的值转为指定内容 适用:select |
object | 例:{1: '男', 2: '女'} | - |
showTip | 是否鼠标移上提示 | boolean | true | false |
format | 将标准时间字符串转为指定格式 标准时间例子:'2015-03-05 17:59:00' 适用:time |
string | 'yyyy-mm-dd HH:ii:ss' | 'yyyy-mm-dd HH:ii:ss.f' |
showOverflowTooltip | 当内容过长被隐藏时显示 | boolean | true | false |
buttons | 按钮配置 适用:button |
array | 例: [{ emit: 'emitA', text: '查看', key: 'sex', value: 2,/* 键值匹配则显示,否则不显示 / disabled: 'ban', / 键不存在则禁止点击 / not_value: '神', / 键值不匹配则显示,否则不显示 */, class: 'view' color: '#F00' }] |
- |
color | 文字颜色 | string | indigo, red, orange, green, blue, purple, gray | - |
class | 自定义列的样式名 | string | - | - |
isBold | 是否文字加粗 | boolean | true | false |
emit | 自定义列单格格信号名 | string | - | - |
hide | 是否隐藏列 | boolean | true | false |
spanMethod | 是否合并列的方法 | function | - | - |
color | 操作列定义颜色 | string | '#dd0000' | - |
type | 操作列定义类行 | string | text | text |
Table-Data Options
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
key | 键名 | string | - | - |
value | 值,列名 | string | - | - |
value | 图片链接, 适用:image |
string, array | - | - |
Config Options of Table-Header Options
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
path 适用:download |
指定下载文件的路径前辍 | String | - | - |
showFilename 适用:download |
显示文件名 | Boolean | false | true |
showFileIcon 适用:download |
显示文件图标 | Boolean | false | true |
showDownloadIcon 适用:download |
显示下载图标 | Boolean | true | false |
nodeName 适用:download |
指定文件名的节点键名 | String | - | 'name' |
nodeUrl 适用:download |
指定文件链接的节点键名 | String | - | 'url' |
nodeFormat 适用:download |
指定文件格式的节点键名 如未指定则自动识别文件名格式 |
String | - | 'format' |
Zj-Form 表单
基于ElementUI的表格组件——Жидзин(Zidjin)系列组件库。
基本用法
<zj-form :form-basics="basics"></zj-form>
<script>
import {ZjForm} from 'zj-element';
export default {
components: {
ZjForm,
},
data: ()=>({
basics:
})
};
</script>
Zj-Form Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
form-header | 表单配置 | array | - | - |
form-data | 表单数据 | object | - | - |
column | 分列数 | number,string | 1, 2, 3, 4, 6, 12, 24 | 2 |
size | 表单格子尺寸 | string | 空值/medium / small / mini / min 对应高度:40/36/32/28 |
- |
label-width | 表单域标签的宽度 | string | '50px' | 'auto' |
label-position | 表单标签的对齐方式 如果值为 left 或者 right 时,则需要设置 label-width
|
string | left, right, top | right |
show-confirm | 显示确认按钮 | boolean | true | false |
show-reset | 显示重置按钮 | boolean | true | false |
show-cancel | 显示取消按钮 | boolean | true | false |
show-edit | 显示编辑按钮(editable=='edit'需要同时满足) | boolean | false/true | false |
show-delete | 显示删除按钮(editable=='edit'需要同时满足) | boolean | false/true | false |
auto-clear | 关闭时自动清除图像等数据 | boolean | false | true |
inline | 已去除。行内表单模式 V1.0.10去除,不适用复杂表单,由search-bar代替 |
boolean | true | false |
editable | 是否可编辑表单 | String,Boolean | add,view,view,finity | edit |
config | 表格配置/表格接口配置 | object | { // 空数据时显示的文本内容 emptyText: '暂无数据',} { emptyText: '-', underline: true, //数据请求接口 addAction: { enable: true, url: '/api/enroll_add', method: 'POST', headers: { Authorization: localStorage.getItem('token') }, nodeStatus: 'err', nodeStatusValue: 0,} |
- |
action-success-function | 请求接口成功回调函数 | Function | actionSuccess(result, action, param) { // console.log("onTheadEditSuccess:", result, action, param) this.showLoading = false; this.download(); this.$message({ message: '保存成功', type: 'success' }); |
|
action-fail-function | 请求接口失败回调函数 | Function | actionEditFail(error, action, param) { console.log("onTheadEditFail:", error, action, param) this.$message({ message: error.msg, type: 'warning' }); this.showLoading = false; }, |
- |
switch-edit | 是否使用编辑模式 | Boolean | true | false |
enableEdit | 初始化编辑状态 | Boolean | true | false |
is-strict-param | 是否严格约束字段。 是则按照表头生成新参数 |
Boolean | true | false |
Form-Header Options
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | 表单类型 | string | 'plain', 'text', 'textarea', 'number', 'password', 'stepper','switch', 'radio', 'checkBox', 'time', 'date', 'month', 'year', 'dateTime', 'dateTimeRange', 'select', 'cascader', 'upload', 'image','editor','plain-time','plain-select', 'plain-switch',headline', 'divider', 'slot', | - |
field | 键名 | string | - | - |
title | 标题 | string | - | - |
span | 栅格占据的列数 | number | 1-24 | 根据column属性等分 |
place或placeholder | 占位提示文字 | string | - | - |
rules | 验证规则 | array | { required: true, message: '枚举名称必填', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }, { pattern : /(^1[356789]\d{9}$)/, message: '手机号码错误', trigger: 'blur', }, |
- |
slot | 自定义槽名称 适用:slot |
string | "title" | - |
prepend | 前辍文字br />适用:text | string | - | - |
append | 后辍文字br />适用:text | string | - | - |
icon | 后辍图标br />适用:text | string | 'el-icon-edit',详见官方文档 | - |
prependIcon | 前辍图标br />适用:text | string | 'el-icon-edit',详见官方文档 | - |
emit | 自定义后辍按钮触发信号名br />适用:text | string | - | - |
prependEmit | 自定义前辍按钮触发信号名br />适用:text | string | - | - |
multiple | 是否多选 适用:select |
boolean | true | false |
collapseTags | 多选模式下是否折叠Tag 适用:select, cascader |
boolean | true | false |
options | 选项。 适用:select, sex |
array | 例:[{ value: 1, label: '男' }, { value: 2, label: '女', }] | - |
position | 位置 适用:number |
string | 'right' | - |
start | 开始 适用:time |
string | '08:30' | |
end | 结束 适用:time |
string | '00:15' | |
step | 步长 适用:time |
string | '18:30' | |
defaultTime | 默认时间 适用:dateTime |
string | '12:00:00' | |
valueFormat | 日期时间格式 适用:date, time, dateTime, year, month |
string | 'yyyy-MM-dd HH:mm:ss' Element 日期格式 |
'yyyy-MM-dd HH:mm:ss' |
pickerOptions | 不知道 适用:dateTime |
string | 'pickerOptions' | |
startPlace | 开始占位符 适用:dateTimeRange |
'pickerOptions' | ||
endPlace | 结束占位符 适用:dateTimeRange |
|||
fill | 按钮激活填充色和边框色 适用:radio |
string | '#ffffff' | |
textColor | 激活时的文本颜色 适用:radio |
string | '#409eff' | |
config | 配置选项 适用:select, upload, cascaders |
object | { label: 'name', value: 'id', } | |
size | 尺寸 适用:text, number, cascaders |
string | medium / small / mini/ min | small |
showAllLevels | 输入框中是否显示选中值的完整路径 适用:cascaders |
boolean | true | false |
row | 文本域显示行数 适用:textarea |
number | 3 | 3 |
activeValue | 激活值,即真值 适用:switch |
number, string, boolean | - | 1 |
inactiveValue | 未激活值,即假值 适用:switch |
number, string, boolean | - | 0 |
contentPosition | 分割线文字位置 适用:divider |
string | left / right / center | center |
tip | 数据的提示。支持格式化键名 适用:plain |
string | 分类ID:{{classify_id}},分类名称:{{classify_value}}。 | - |
help | 数据的帮助图标提示。支持格式化键名 适用:plain |
string | 同上 | - |
labelTip | 标签的提示。支持格式化键名 | string | 同上 | - |
labelHelp | 标签的帮助图标提示。支持格式化键名 | string | 同上 | - |
ban | 禁止编辑 | boolean | true | false |
action | 自动请求接口信息的动作 | object | 例子:{ enable: true, /* 启用动作,默认true / url: '/api/thread_auth_list/ ', / * 请求地址,必填 / method: 'GET', / * 请求方式,默认值 GET / headers: { Authorization: localStorage.getItem('token') } / * 自定义请求头*/ nodeStatus: 'err', /* * 判断状态的节点名称 , 默认值err*/ nodeStatusValue: 0, /* * 判断节点状态成功的值, 默认值 0*/ nodeData: 'data.list'},/* * 获取数据的节点名称,默认值data*/ }, |
_ |
Config Options of Form-Header Options
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | 标签键名 适用:select, cascaders |
string | - | - |
value | 键值键名 适用:select, cascaders |
string, number | 1, 2 | |
checkStrictly | 父子节点均可选择 适用:cascaders |
boolean | true | false |
expandTrigger | 次级节点的展开方式 适用:cascaders |
string | click / hover | click |
lazy | 是否动态加载子节点,需与 lazyLoad 方法结合使用 适用:cascaders |
boolean | ||
multiple | 是否支持多选 适用:cascaders |
boolean | ||
emitPath | true返回各级菜单的数组,false返回该节点的值 适用:cascaders |
string | false | true |
children | 树枝键名 适用:cascaders |
string | ||
disabled | 禁用键名 适用:cascaders |
string | ||
leaf | 叶子键名 适用:cascaders |
string | ||
name | 上传文件指定的键名 适用:upload |
string | - | 'file' |
showTitle | 是否显示文件标题 适用:upload |
boolean | false | true |
action | 上传请求地址 适用:upload |
string | '/api/upload' | - |
headers | 上传请求头 适用:upload |
object | headers: {Authorization: '',} | - |
autoUpload | 是否自动上传 适用:upload |
boolean | false | true |
fileType | 允许上传的文件类型 适用:upload |
-++array | - | ['jpg', 'png', 'jpge', 'pdf', 'doc'] |
limit | 限制上传个数 适用:upload |
number | - | 9 |
split | 当为字符串时候的拆分符 适用:upload |
string | - | ';' |
thumb | 预览图标尺寸 适用:upload |
string | 'small' | |
size | 限制上传的文件大小, 单位:M 适用:upload |
number | - | 2 |
data | 上传时附带的额外参数 适用:upload |
object | data: {menu: '',} | - |
nodeStatus | 上传状态判断的节点名称 适用:upload |
string | - | err |
nodeStatusValue | 上传状态判断成功的节点值 适用:upload |
string,number | - | 0 |
nodeUrl | 上传成功后引用链接地址的节点名称,最多两层,用点"."隔开 适用:upload |
string | - | 'data.url' |
nodeTitle | 上传成功后引用文件标题的节点名称,最多两层,用点"."隔开 适用:upload |
string | - | 'data.name' |
nodeSize | 上传成功后引用文件大小的节点名称,最多两层,用点"."隔开 适用:upload |
string | - | 'data.size' |
Zj-Form Events
事件名称 | 说明 | 回调参数 |
---|---|---|
confirm | 点击确定触发 | data: 键值对表单数据 |
cancle | 点击取消触发 | |
change | 失去焦点事件 | e:number类型表格失去焦点时的数据 |
Zj-Form Methods
方法名 | 说明 | 参数 |
---|---|---|
clear | 清空表单 | - |
版本说明
V1.0.61.211028-release
修正若干地图调用时不稳定的问题,早期稳定版,用于基本的地图数据展示,无鼠标交互事件等。已停止更新。
V1.1.0.211028-alpha
添加天地图原生坐标标记事件@marker、多边形事件@polygen、标签事件@label。
V1.1.1.211029-beta
支持天地图原生拖动事件@move、缩放事件@zoom。
Zj-Search-Bar 搜索条
基于ElementUI的搜索组件——Жидзин(Zidjin)系列组件库。
基本用法
<zj-search-bar :search-form="searchForm" show-search show-reset show-export></zj-search-bar>
<script>
import {ZjSearchBar} from 'zj-element';
export default {
components: {
ZjSearchBar,
},
data: ()=>({
searchForm: [
{ key: 'company', value: '', title: '签约时间', tip: '公司名称', type: 'input' },
{ key: 'month', value: '', title: '月', tip: '月', type: 'month' },
{ key: 'data', value: '', title: '日期', tip: '日期', type: 'date' },
{ key: 'kinds', value: '', title: '天气', tip: '天气', type: 'select',
options: [
{ value: 0, label: '晴' },
{ value: 1, label: '雨' },
{ value: 2, label: '多云' },
],
config: {
/* porps属性 */
checkStrictly: true, // 父子节点均可选择
expandTrigger: 'hover', // 次级节点的展开方式 click / hover
lazy: false, // 是否动态加载子节点,需与 lazyLoad 方法结合使用
multiple: false, // 是否支持多选
emitPath: true, // true返回各级菜单的数组,false返回该节点的值
label: 'label', // 标签
value: 'value', // 键值
children: 'children', // 树枝键名
disabled: 'disabled', // 禁用键名
leaf: 'leaf', // 叶子键名
},
}
]
})
};
</script>
Zj-Search-Bar Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
search-form | 搜索配置 | array | - | - |
show-search | 显示搜索按钮 | boolean | true | false |
show-reset | 显示重置按钮 | boolean | true | false |
show-export | 显示导出按钮 | boolean | true | false |
size 原:button-type |
尺寸类型 | string | medium / small / mini | small |
Search-Form Option
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
key | 键名 | string | - | - |
value | 默认值 | string | - | - |
title | 标题 | string | - | - |
tip | 占位文字 | string | - | - |
type | 显示类型 | string | input / month / date / select / cascader/dateTimeRange | - |
multiple | 可多选 | boolean | true | false |
showAllLevels | 显示完整路径 | boolean | false | true |
options | 选项列表 适用:select, cascader |
array | [{ value: 0, label: '晴' },...] | - |
config | 选项的配置 适用:select |
object | { /* porps属性 */ checkStrictly: true, // 父子节点均可选择 expandTrigger: 'hover', // 次级节点的展开方式 click / hover lazy: false, // 是否动态加载子节点,需与 lazyLoad 方法结合使用 multiple: false, // 是否支持多选 emitPath: true, // true返回各级菜单的数组,false返回该节点的值 label: 'label', // 标签 value: 'value', // 键值 children: 'children', // 树枝键名 disabled: 'disabled', // 禁用键名 leaf: 'leaf', // 叶子键名 } |
- |
Event
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 当内容值改变时触发 | value, key, params,改变的值、键名、全部参数 |
clear | 点击任一格子清除时触发 | key, params,清除的键名 |
search | 点击搜索按钮时触发 | params,搜索的参数object |
reset | 点击重置按钮时触发 | - |
export | 点击导出按钮时触发 | - |
Zj-Dialog 对话框
基于ElementUI的表格组件——Жидзин(Zidjin)系列组件库。
基本用法
<zj-dialog :show.sync="show" :config="config"></zj-dialog>
<script>
import {ZjDialog} from 'zj-element';
export default {
components: {
ZjDialog,
},
data: ()=>({
show: true,
config: {
width: '50%',
title: '新增',
},
})
};
</script>
Zj-Dialog Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
show | 对话框名称 | string | true | false |
config | 对话框配置 | object | - | - |
show-confirm | 显示确认按钮 | boolean | true | false |
show-reset | 显示重置按钮 | boolean | true | false |
show-cancel | 显示取消按钮 | boolean | true | false |
Config Options
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
title | 标题 | string | - | - |
width | 宽度 | string | - | 50% |
mixWidth | 最大宽度 | string | - | '800px' |
destroyOnClose | 关闭时销毁 Dialog 中的元素 | boolean | true | |
modalAppendToBody | 遮罩层是否插入至 body 元素上 | boolean | false | true |
closeOnClickModal | 是否可以通过点击 modal 关闭 Dialog | boolean | true | false |
Event
参数 | 说明 | 回调函数 |
---|---|---|
onConfirm | 点击确认触发 | - |
onReset | 点击重置触发 | - |
onClose | 点击关闭按钮触发 | - |
Zj-Pagination 分页器
基于ElementUI的页面组件——Жидзин(Zidjin)系列组件库。
基本用法
<zj-pagination :page.sync="page" :size.sync="size" :total="total" @change="onChange" />
<script>
import {ZjPagination} from 'zj-element';
export default {
components: {
ZjPagination,
},
data: ()=>({
page: 1,
size: 20,
total:0,
})
methods: {
onChange(e) {
this.page = e.page;
this.size = e.size;
this.onDownload();
},
}
};
</script>
Zj-Pagination Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
page | 显示页数 | number | - | 1 |
size | 显示每页数量 | number | - | 10 |
total | 显示列表总数量 | number | - | 0 |
page-sizes | 每页显示个数选择器的选项设置 | Array | - | [10, 20, 30, 50, 100] |
layout | 组件布局,子组件名用逗号分隔 | - | - | - |
Event
参数 | 说明 | 回调参数 |
---|---|---|
onSizeChange | pageSize改变时触发 | 每页条数 |
onCurrentChange | currentPage改变时触发 | 当前页 |
Zj-Menu 菜单栏
基于ElementUI的页面组件——Жидзин(Zidjin)系列组件库。
基本用法
<zj-menu :menus="groupMenus"></zj-menu>
<script>
import {ZjMenu} from 'zj-element';
export default {
components: {
ZjMenu,
},
data: () => ({
data2:[],
menus: [{},{}],
}),
computed: {
groupMenus() {
return this.menus.map(it => ({
title: 'sgswf ',
// icon: 'http:... ',
// path: '',
}))
},
},
}
</script>
Zj-Menu Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
menus | [] | |||
activeMenu | ||||
isCollapse | boolean | false | ||
unique-opened | boolean | false | false | |
collapse-transition | boolean | false | false |
Event
参数 | 说明 | 回调函数 |
---|---|---|
activeMenu | 当前激活菜单 | |
handleSelect | 菜单激活回调 | index:选中菜单项的index, indexPath:打开的sub-menu的index path |
Zj-Tree 列表树
基于ElementUI的页面组件——Жидзин(Zidjin)系列组件库。
基本用法
<zj-tree show-operate show-add show-edit show-delete :config=treeConfig :tree-data="groupTree">
<script>
import {Zjtree} from 'zj-element';
export default {
components: {
Zjtree,
},
data: () => ({
groupTree:[],
treeConfig:{
nodeKey: "group", //树枝唯一标识
showCheckbox: false, //是否可选
defaultExpandAll: false, //展开所有
checkStrictly: false, //是否严格的遵循父子不互相关联的做法,默认为 false
/* props属性,一共就4个,不要像element-ui那样分成子对象了 */
children: 'children', //树枝
label: 'name', //标签
},
}),
}
</script>
Zj-Tree Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
treeData | 树数据 | [] | - | - |
treeExpanded | 默认展开的节点的key的数组 | Array | - | [] |
treeDefault | 默认勾选的节点的key的数组 | Array | - | [] |
config | 对话框配置 | object | - | - |
show-operate | 显示操作按钮 | boolean | true/false | false |
show-edit | 编辑按钮 | boolean | true/false | false |
show-delete | 删除按钮 | boolean | true/false | false |
show-add | 添加按钮 | boolean | true/false | false |
allow-operate-key | 配合showOperate使用 | boolean | true/false | false |
branch-icon | 树枝图标 | string | - | 组织图标 |
leaf-icon | 树叶图标 | string | - | 用户图标 |
Config Options
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
nodeKey | 节点唯一性键名 | string | - | key |
showCheckbox | 是否可选 | boolean | true/false | false |
highlightCurrent | boolean | true/false | true | |
defaultExpandAll | 展开所有 | boolean | true/false | false |
checkStrictly | 是否严格遵守父子互不关联的做法 | boolean | true/false | false |
defaultExpandedKeys | 默认展开的节点的key的数组 | Array | - | [] |
checkOnClickNode | 是否在点击节点的时候展开或者收缩节点。 | boolean | true/false | false |
children | 树枝键名 | string | - | children |
label | 标签键名 | string | - | label |
tip | 移上提示文字键名 | string | - | tip |
Event
事件名称 | 说明 | 回调参数 |
---|---|---|
click | 当节点点击时触发 | - |
check | 当复选框选择时触发 | - |
Zj-Loading 加载
基于ElementUI的页面组件——Жидзин(Zidjin)系列组件库。
基本用法
<zj-loading text="加载中" :show="showLoading" />
<script>
import {ZjLoading} from 'zj-element';
export default {
components: {
ZjLoading,
},
data: () => ({
}),
}
</script>
Zj-Loading Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
text | 显示在加载图标下方的加载文案 | string | - | - |
showk | 控制加载图标的显示和隐藏 | boolean | true/false | false |
日志:
zj-form-dialog
zj-form-input
zj-table-dialog
zj-form-button
zj-formTinymce
等组件待删除。