0.1.11 • Published 4 years ago

@m7751991/zfxt-common-ui v0.1.11

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

zfxt-common-ui

浏览器兼容性

浏览器版本是否兼容说明
chrome版本号兼容-
IE11+兼容-

导航

组件列表

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.

0.1.11

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago