Water-Level-Pond
<scroll-board :data="data" :index="true" :columnWidth="columnWidth" :textAlign="textAlign" />
data: { // data内容可以是html标签 内容由v-html渲染
data: [ // 必须 每行数据的数组长度应保持一致
['张三', '男', '这里是地址'],
['李四', '女', '这里是地址'],
['王五', '男', '这里是地址'],
['赵六', '女', '这里是地址'],
['钱七', '男', '这里是地址'],
['孙八', '女', '这里是地址'],
['杨九', '男', '这里是地址'],
['吴十', '女', '这里是地址']
]
}
// 非必须 设置每一栏的宽度 允许插入空位 空位均分宽度
columnWidth: [50, 50, 50]
// 非必须 设置每一栏的对齐方式 允许插入空位 默认居左
textAlign: ['center', 'center']
// index 非必须 属性为真时 自动添加序号
// rowNum 非必须 可以设置展示行数
// oddBG 非必须 可以设置奇数行背景色
// evenBG 非必须 可以设置偶数行背景色
// titleBG 非必须 可设置表头背景色
// carousel 非必须 设置为page 滚动时整页滚动
Water-Level-Pond
<scroll-board :data="data" carousel="page" :columnWidth="columnWidth" :textAlign="textAlign" />
data: {
data: [
['张三', '男', '这里是地址'],
['李四', '女', '这里是地址'],
['王五', '男', '这里是地址'],
['赵六', '女', '这里是地址'],
['钱七', '男', '这里是地址'],
['孙八', '女', '这里是地址'],
['杨九', '男', '这里是地址'],
['吴十', '女', '这里是地址']
],
// 非必须 添加此项自动生成表头
title: ['姓名', '性别', '地址']
}
columnWidth: [50, 50]
textAlign: ['center', 'center']
Water-Level-Pond
<water-level-pond :level="[60, 40]" />
// level必须为数组
// 可绑定colors属性 非必须 未配置该项自动使用默认色
// 当colors属性为数组时 波浪自动应用渐变色
// noGradient为true时可关闭波浪渐变色效果
Water-Level-Pond
<water-level-pond :level="[60, 40]" type="rect" :waveNum="2" :waveHeight="0.3" />
// 矩形样式
// waveNum 可设置波峰个数
// waveHeight 可设置波峰高度
Water-Level-Pond
<water-level-pond :level="[60, 40]" type="roundRect" borderColor="rgba(45, 219, 216, 0.5)" />
// 圆角矩形样式
// 可特殊设置边框颜色 文字与边框颜色同步
Percent-Pond
<percent-pond :percent="66" />
Percent-Arc
<percent-arc :percent="66" :ringLineWidth="10" :arcLineWidth="20" arcType="round">66<percent-arc/>
// 内置slot 可以置入任意元素
// percent 必须 设置弧度程度
// arcType 非必须 设置是否为圆角弧形 round | butt
// raidus 非必须 设置环半径
// ringLineWidth 非必须 设置环线宽度
// arcLineWidth 非必须 设置弧线宽度
// ringColor 非必须 设置环线颜色 只能设置一种颜色
// arcColor 非必须 设置弧线颜色 可以设置多种 多种自动渐变
Percent-Arc
<percent-arc :percent="66" ringColor="#c7166f" :arcColor="['#2755fe', '#ff12cb']">66<percent-arc/>
Number-Show
<number-show :number="1399" />