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样式，必须
import ZjTianditu 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）系列组件库。
安装
推荐使用 npm 的方式安装。
npm install zj-element引入
局部引入，在 vue页面文件中写入以下内容
import {ZjTable} from 'zj-element';
export default {
components: {
ZjTable,
},
};基本用法
<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' | - |
| key | 键名 | string | - | - |
| value | 值，列名 | string | - | - |
| sortable | 当前列是否支持排序 | boolean | true | false |
| width | 列宽度。单位默认px | number | 100 | |
| option | 选项。将传入的值转为指定内容 适用：select |
object | 例：{1: '男', 2: '女'} | - |
| showOverflowTooltip | 当内容过长被隐藏时显示 | boolean | true | false |
| buttons | 按钮配置 适用：button |
array | 例： [{ emit: 'emitA', text: '查看', key: 'sex', value: 2,/* 键值匹配则显示，否则不显示 / disabled: 'ban', / 键不存在则禁止点击 / not_value: '神', / 键值不匹配则显示，否则不显示 */, }] |
- |
| hide | 是否隐藏列 | boolean | true | false |
Table-Data Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| key | 键名 | string | - | - |
| value | 值，列名 | string | - | - |
| value | 图片链接， 适用：image |
string, array | - | - |
Zj-Form
基于ElementUI的表格组件——Жидзин（Zidjin）系列组件库。
安装
推荐使用 npm 的方式安装。
npm install zj-element引入
局部引入，在 vue页面文件中写入以下内容
import {ZjForm} from 'zj-element';
export default {
components: {
ZjForm,
},
};基本用法
<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 | - |
| label-width | 表单域标签的宽度 | string | '50px' | 'auto' |
| inline | 行内表单模式 V1.0.10去除，不适用复杂表单，由search-bar代替 |
boolean | true | false |
| show-confirm | 显示确认按钮 | boolean | true | false |
| show-reset | 显示重置按钮 | boolean | true | false |
| show-cancel | 显示取消按钮 | boolean | true | false |
| auto-clear | 关闭时自动清除图像等数据 | boolean | false | true |
Table-Header Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 表单类型 | array | 'plain', 'text', 'textarea', 'number', 'password', 'stepper','switch', 'radio', 'checkBox', 'time', 'date', 'month', 'year', 'dateTime', 'dateTimeRange', 'select', 'cascader', upload'' | - |
| field | 键名 | string | - | - |
| title | 标题 | string | - | - |
| span | 栅格占据的列数 | number | 1-24 | 根据column属性等分 |
| tip 或place V1.0.9以前 |
占位提示文字 | 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', }, |
- |
| 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 |
| option | 选项。 适用：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 |
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 |
object | { label: 'name', value: 'id', } | |
| size | 尺寸 适用：text, number, cascaders |
string | medium / small / mini | small |
| showAllLevels | 输入框中是否显示选中值的完整路径 适用：cascaders |
boolean | true | ？ |
| row | 文本域显示行数 适用：textarea |
number | 3 | 3 |
| ban | 禁止编辑 适用：text, select, |
|||
Config Options of Table-Header Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 标签键名 适用：select, cascaders |
string | - | - |
| value | 键值键名 适用：select, cascaders |
string, number | 1, 2 | |
| checkStrictly | 父子节点均可选择 适用：cascaders |
boolean | true | |
| expandTrigger | 次级节点的展开方式 适用：cascaders |
string | click / hover | |
| lazy | 是否动态加载子节点，需与 lazyLoad 方法结合使用 适用：cascaders |
boolean | ||
| multiple | 是否支持多选 适用：cascaders |
boolean | ||
| emitPath | true返回各级菜单的数组，false返回该节点的值 适用：cascaders |
string | ||
| 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: '',} | - |
| node-status | 上传状态判断的节点名称 适用：upload |
string | - | err |
| node-status-value | 上传状态判断成功的节点值 适用：upload |
string,number | - | 0 |
| node-url | 上传成功后引用链接地址的节点名称，最多两层，用点"."隔开 适用：upload |
string | - | 'data.url' |
| node-title | 上传成功后引用文件标题的节点名称，最多两层，用点"."隔开 适用：upload |
string | - | 'data.name' |
| node-size | 上传成功后引用文件大小的节点名称，最多两层，用点"."隔开 适用：upload |
string | - | 'data.size' |
Zj-Form Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| confirm | 点击确定触发 | data: 键值对表单数据 |
| cancle | 点击取消触发 | |
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）系列组件库。
安装
推荐使用 npm 的方式安装。
npm install zj-element引入
局部引入，在 vue页面文件中写入以下内容
import {ZjSearchBar} from 'zj-element';
export default {
components: {
ZjSearchBar,
},
};基本用法
<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 |
| 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 | - |
| 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）系列组件库。
安装
推荐使用 npm 的方式安装。
npm install zj-element引入
局部引入，在 vue页面文件中写入以下内容
import {ZjDialog} from 'zj-element';
export default {
components: {
ZjDialog,
},
};基本用法
<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% |
| destroyOnClose | 关闭时销毁 Dialog 中的元素 | boolean | true | |
| modalAppendToBody | 遮罩层是否插入至 body 元素上 | boolean | false | true |
| closeOnClickModal | 是否可以通过点击 modal 关闭 Dialog | boolean | true | false |
Zj-Pagination
基于ElementUI的页面组件——Жидзин（Zidjin）系列组件库。
安装
推荐使用 npm 的方式安装。
npm install zj-element引入
局部引入，在 vue页面文件中写入以下内容
import {ZjDialog} from 'zj-element';
export default {
components: {
ZjDialog,
},
};基本用法
<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% |
| destroyOnClose | 关闭时销毁 Dialog 中的元素 | boolean | true | |
| modalAppendToBody | 遮罩层是否插入至 body 元素上 | boolean | false | true |
| closeOnClickModal | 是否可以通过点击 modal 关闭 Dialog | boolean | true | false |