npm package: @m7751991/zfxt-common-ui
Description: ## 浏览器兼容性
Author: m7751991@outlook.com
Latest version: 0.1.11

# zfxt-common-ui

## 浏览器兼容性

| 浏览器         | 版本   | 是否兼容     | 说明 |
| -------------- | ------ | ------------ | ---- |
| chrome         | 版本号 | 兼容 | -    |
| IE             | 11+    |     兼容    | -    |


## 导航

### 组件列表

#### 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%";
      }
    }
  }
```

#### 页面模块展示头组件参数介绍

```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() | 展开当前列| 返回的参数 |




## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).