指示器

预定义一组模式的指示器组件。

介绍

一般结合轮播使用的指示器组件。

分为 pure-indicator 基础组件和 pure-indicator-{模式名称} 指定模式组件。

基础组件

通过 mode 属性来指定模式。

比如 <pure-indicator mode="bar" /> 等同于直接使用 <pure-indicator-bar /> 组件。

模式组件

• 点状模式： <pure-indicator-dot />
• 条状模式： <pure-indicator-bar />
• 线状模式： <pure-indicator-line />
• 下标模式： <pure-indicator-index />
• 数字模式： <pure-indicator-number />
• 进度模式： <pure-indicator-progress />
• 标题模式： <pure-indicator-title />

属性

基础

基础组件支持下方模式组件的所有属性。

名称	类型	默认值	说明
mode	String	bar	模式，详情见上方说明

dot

名称	类型	默认值	说明
total	Number	0	总数
current	Number	0	当前值
color	String	-	默认颜色
activeColor	String	-	激活颜色
size	String	-	点的大小
static	Boolean	false	是否是静态布局，默认是 absolute 布局

bar

名称	类型	默认值	说明
total	Number	0	总数
current	Number	0	当前值
color	String	-	默认颜色
activeColor	String	-	激活颜色
width	String	-	条的宽度
height	String	-	条的高度
static	Boolean	false	是否是静态布局，默认是 absolute 布局

line

名称	类型	默认值	说明
total	Number	0	总数
current	Number	0	当前值
color	String	-	默认颜色
activeColor	String	-	激活颜色
width	String	-	线的宽度
height	String	-	线的高度
static	Boolean	false	是否是静态布局，默认是 absolute 布局

index

名称	类型	默认值	说明
total	Number	0	总数
current	Number	0	当前值
color	String	-	默认颜色
activeColor	String	-	激活颜色
size	String	-	下标项容器尺寸
static	Boolean	false	是否是静态布局，默认是 absolute 布局

number

名称	类型	默认值	说明
total	Number	0	总数
current	Number	0	当前值
color	String	-	默认颜色
activeColor	String	-	激活颜色
separator	String	-	分隔符
static	Boolean	false	是否是静态布局，默认是 absolute 布局

progress

名称	类型	默认值	说明
total	Number	0	总数
current	Number	0	当前值
color	String	-	默认颜色
activeColor	String	-	激活颜色
width	String	-	进度条的宽度
height	String	-	进度条的高度
static	Boolean	false	是否是静态布局，默认是 absolute 布局

title

名称	类型	默认值	说明
list	Array	0	数据列表
keyName	String	-	数据列表中，标题字段的键名，用于显示标题
current	Number	0	当前值
color	String	-	默认颜色
activeColor	String	-	激活颜色
static	Boolean	false	是否是静态布局，默认是 absolute 布局

事件

基础

名称	参数	说明
@onItemClick	index: 被点击项下标	点击时触发

dot

名称	参数	说明
@onItemClick	index: 被点击项下标	点击时触发

bar

名称	参数	说明
@onItemClick	index: 被点击项下标	点击时触发

index

名称	参数	说明
@onItemClick	index: 被点击项下标	点击时触发

title

名称	参数	说明
@onItemClick	index: 被点击项下标	点击时触发