@m7751991/zfxt-ui v0.1.13

zfxt-common-ui

浏览器兼容性

导航

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
    }

文书组件参数介绍

依赖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 [];
      }
    }