1.1.0 • Published 3 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'},
]