1.1.0 • Published 4 years ago
szjz-wh v1.1.0
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'},
]