npm package: @m7751991/zfxt-ui
Description: | 浏览器         | 版本   | 是否兼容     | 说明 | | -------------- | ------ | ------------ | ---- | | chrome         | 版本号 | 兼容 | -    | | IE             | 11+    |     兼容    | -    |
Author: m7751991@outlook.com
Latest version: 0.1.13

# zfxt-common-ui

## 浏览器兼容性

| 浏览器         | 版本   | 是否兼容     | 说明 |
| -------------- | ------ | ------------ | ---- |
| chrome         | 版本号 | 兼容 | -    |
| IE             | 11+    |     兼容    | -    |


## 导航

[TOC]



### 组件列表

#### 1. 字段展示组件 
#### 2. 页面模块展示头组件
#### 3. 通用列表组件



### 全局使用
`main.js`

```javascript
// 组件
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`

```javascript
//单个组件名称 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);

```

### 组件参数介绍

#### 字段展示组件参数介绍

```js
 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;
    }
  }
}
```

#### 页面模块展示头组件参数介绍

```js
   //头部显示文本
   headerText: {
      type: String,
      default: function() {
        return "";
      }
    },
   //背景颜色可选灰色，默认无色
    gray: {
      type: Boolean,
      default: function() {
        return false;
      }
    }
```



#### 通用列表参数介绍参数介绍

```javascript
  //数据源
    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 上传文书组件，使用前请引入
```js
 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 [];
      }
    }
```