szjz-wh

szjz-wh vue components

安装

# install dependencies
npm install szjz-wh

引用

1.全局引用：在main.js函数中添加

import SZJZWH from 'szjz-wh'

Vue.use(SZJZWH)

2.局部引用

import WhQuantityView from 'szjz-wh'

Vue.use(WhQuantityView)

quantity-view

<wh-quantity-view viewType="green" width='100px' ></wh-quantity-view>

| 属性名 | 描述 | 备注 | | --------------- | ------------------------------------- | -------------------- | | viewType | 默认值blue ,blue orange green | 默认样式三种 | | width | 默认值120px | 必须设置宽度 | | backgroundImage | | 背景图片 | | titleColor | | 标题颜色 | | tSize | | 标题字体大小 | | title | | 标题内容 | | tTop | | 标题距离顶部内边距 | | subTitle | | 子标题内容 | | subColor | | 子标题颜色 | | subFontSize | | 子标题字体大小 | | subTop | | 子标题距离顶部内边距 |

table-item

<wh-table-item></wh-table-item>

| 属性名 | 描述 | 备注 | | --------------- | ----------------------------- | ---------------------------------------- | | tableType | 默认值cell ,cell header | 设置tableItem 类型 | | width | | 设置宽度 | | backgroundImage | | 背景图片 | | itemData | | 设置表格中文本样式 | | rowData | | 表格数据源 | | itemWidth | | 宽度 | | itemHeight | | 高度 | | backgroundImage | | 背景图片 | | hasBorder | 默认值true | 是否设置边框，如果为true，则背景图片失效 | | tableBorder | | hasBorder必须设置为true，否则无效 |

关于itemData中设置项

| 属性名 | 描述 | 备注 | | ---------- | ----------------------------------- | ---------------------------------------------------------- | | width | 默认表格中元素均等分，width值为1-24 | 如果不设置则为均等，如果设置某个元素的宽度，则其他都要设置 | | height | | 表格高度 | | color | | 字体颜色 | | fontSize | | 字体大小 | | align | 参考css | 设置对其方式 | | lineHeight | 默认值等于height | 设置lineHeight | | name | header参数 | 改属性只在设置header中使用 |

关于设置tableBorder

| 属性名 | 描述 | 备注 | | ------------ | ------- | -------- | | border | 参考css | 边框 | | borderWidth | 参考css | 边框宽度 | | borderStyle | 参考css | 边框样式 | | borderColor | 参考css | 边框颜色 | | borderRadius | 参考css | 边框圆角 |

table-view

| 属性名 | 描述 | 备注 | | ------------ | ----------------------------- | ------------------ | | width | 默认值cell ,cell header | 设置tableItem 类型 | | height | | 设置宽度 | | tableSetting | | 背景图片 | | tableData | | 标题颜色 |

关于设置tableSetting

| 属性名 | 描述 | 备注 | | ------------- | ------------ | ------------------ | | headerSetting | 参考itemData | 配置header | | hBorder | | 设置header边框 | | headerBorder | 默认false | header是否有边框 | | cellBorder | 默认false | cell是否有边框 | | cBorder | | 设置cell边框 | | cellSpace | 默认5px | 设置cell之间的间距 | | cellSetting | 参考itemData | 配置cell |

tableSetting:{
        headerSetting:[
          {name:'姓名',},
          {name:'年龄',},
          {name:'性别',},
          {name:'成绩',}
        ],
        cellSetting:[
          {attr:'name'},
          {attr:'age'},
          {attr:'sex'},
          {attr:'score'}
        ],
        cellSpace:'5px',
        // headerBorder:true,
        // cellBorder:true
 },
 tableData:[
   {name:'张三',age:'20',sex:'男',score:'100'},
   {name:'张三',age:'20',sex:'男',score:'100'},
   {name:'张三',age:'20',sex:'男',score:'100'},
   {name:'张三',age:'20',sex:'男',score:'100'},
   {name:'张三',age:'20',sex:'男',score:'100'},
   {name:'张三',age:'20',sex:'男',score:'100'},
  ]