zfxt-common-ui

浏览器兼容性

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

导航

组件列表

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

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

   //头部显示文本
   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() | 展开当前列| 返回的参数 |

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.