@m7751991/zfxt-ui
v0.1.13
Published
| 浏览器 | 版本 | 是否兼容 | 说明 | | -------------- | ------ | ------------ | ---- | | chrome | 版本号 | 兼容 | - | | IE | 11+ | 兼容 | - |
Downloads
12
Readme
zfxt-common-ui
浏览器兼容性
| 浏览器 | 版本 | 是否兼容 | 说明 | | -------------- | ------ | ------------ | ---- | | chrome | 版本号 | 兼容 | - | | IE | 11+ | 兼容 | - |
导航
[TOC]
组件列表
1. 字段展示组件
2. 页面模块展示头组件
3. 通用列表组件
全局使用
main.js
// 组件
import ownui from "@com.thunisoft.zfxt/zfxt-common-ui";
// 样式
import "@com.thunisoft.zfxt/zfxt-common-ui/lib/zfxt-ui.css";
Vue.use(ownui);
按需引入
main.js
//单个组件名称 OwnItem, OwnTitle, OwnTable
import {OwnItem, OwnTitle, OwnTable} from "@com.thunisoft.zfxt/zfxt-common-ui";
// 样式
import "@com.thunisoft.zfxt/zfxt-common-ui/lib/zfxt-ui.css";
Vue.use(OwnItem);
Vue.use(OwnTitle);
Vue.use(OwnTable);
组件参数介绍
字段展示组件参数介绍
props: {
//slot嵌入dom的时候传true,防止overflow影响显示
noOverflow: {
type: Boolean,
default: function() {
return false;
}
},
//添加重点项,红色*号,默认不是重点
Important: {
type: Boolean,
default: function() {
return false;
}
},
//字段名
itemTitle: {
type: String,
default: function() {
return "";
}
},
//字段值
itemValue: {
type: null,
default: function() {
return "";
}
},
//是否有背景颜色,默认蓝色
haveBgc: {
type: Boolean,
default: function() {
return false;
}
},
//灰色背景颜色 背影颜色可选 灰色
gray: {
type: Boolean,
default: function() {
return false;
}
},
//自定义宽度
width: {
type: String,
default: function() {
return "100%";
}
}
}
//此样式可以修改elementUi的输入框,日期选择框的border颜色
//只需要给elementUi增加类名noBorder 即可实现
.own-no-padding-item-value {
.noBorder {
.el-input__inner {
border-color: #fff;
}
}
}
页面模块展示头组件参数介绍
//头部显示文本
headerText: {
type: String,
default: function() {
return "";
}
},
//背景颜色可选灰色,默认无色
gray: {
type: Boolean,
default: function() {
return false;
}
}
通用列表参数介绍参数介绍
//数据源
dataList: {
type: Array,
default: function() {
return [];
}
},
//列头展示列
tableName: {
required: true,
type: Array,
default: function() {
return [];
}
},
//自定义操作列宽度
width: {
type: String,
default: function() {
//默认自适应宽度没有固定宽度
return "1";
}
},
//设置表头没有阴影
showShadow: {
type: Boolean,
default: function() {
//默认有有阴影
return true;
}
},
//分页页码,计算序号
pageNum: {
type: Number,
default: function() {
return 1;
}
},
//字段描述背影颜色
haveBg: {
type: Boolean,
default: function() {
//默认没有颜色
return false;
}
},
//隐藏操作列
hiddenHandler: {
type: Boolean,
//默认显示
default: false
}
| 事件 | 说明 | 参数 | | ------------------------- | -------- | ---------- | | toggleRowExpansion() | 展开当前列| 返回的参数 |
文书组件参数介绍
依赖elementUI的upload 上传文书组件,使用前请引入
props: {
//数据源
FileList: {
type: Array,
default: function() {
return [];
}
},
//隐藏位置不同的上传按钮1
hiddenUpload: {
type: Boolean,
default: function() {
return false;
}
},
//隐藏位置不同的上传按钮2
hiddenUploadHidden: {
type: Boolean,
default: function() {
return false;
}
},
//设置border
noborder: {
type: Boolean,
default: function() {
return false;
}
},
//设置背景颜色
haveBgc: {
type: Boolean,
default: function() {
return false;
}
},
//自定义后台数据映射文件名称的key
wsName: {
type: String,
default: function() {
return "name";
}
},
//自定义表格展示高度
height: {
type: Number,
default: function() {
return 0;
}
},
//文件格式校验.doc等,待实现
fileCase: {
type: Array,
default: function() {
return [];
}
}