指示器

指示器组件。

类型、模式

指示器有以下几种类型：

• bar: 条形指示器，对应 <pure-indicator-bar> 组件
• dot: 圆点指示器，对应 <pure-indicator-dot> 组件
• index: 下标指示器，对应 <pure-indicator-index> 组件
• line: 线状指示器，对应 <pure-indicator-line> 组件
• number: 数字指示器，对应 <pure-indicator>-number 组件
• progress: 进度指示器，对应 <pure-indicator-progress> 组件
• title: 标题指示器，对应 <pure-indicator-title> 组件

可以通过 <pure-indicator> 组件的 mode 属性设置指示器类型。也可以单独使用对应使用对应指示器组件。

<template>
	<!-- 使用 mode 属性设置指示器类型 -->
	<pure-indicator mode="bar"></pure-indicator>

	<!-- 也可以单独使用对应指示器组件 -->
	<pure-indicator-bar></pure-indicator-bar>
	<pure-indicator-dot></pure-indicator-dot>
	<pure-indicator-index></pure-indicator-index>
	<pure-indicator-line></pure-indicator-line>
	<pure-indicator-number></pure-indicator-number>
	<pure-indicator-progress></pure-indicator-progress>
	<pure-indicator-title></pure-indicator-title>
</template>

属性

<pure-indicator>

名称	类型	默认值	说明
color	String	undefined	指示器颜色
activeColor	String	undefined	指示器激活颜色
dotSize	String	undefined	圆点指示器大小
barWidth	String	undefined	条状指示器宽度
barHeight	String	undefined	条状指示器高度
indexSize	String	undefined	下标指示器大小
indexFontSize	String	undefined	下标指示器字体大小
lineWidth	String	undefined	线型指示器宽度
lineHeight	String	undefined	线型指示器高度
separator	String	undefined	数字指示器分隔符
progressWidth	String	undefined	进度指示器宽度
progressHeight	String	undefined	进度指示器高度
titleFontSize	String	undefined	标题指示器字体大小

<pure-indicator-bar>

名称	类型	默认值	说明
total	Number	0	总数量
current	Number	0	激活项下标
color	String		默认颜色
activeColor	String		激活项颜色
width	String	100%	条的宽度
height	String	4px	条的高度

<pure-indicator-dot>

名称	类型	默认值	说明
total	Number	0	总数量
current	Number	0	激活项下标
color	String		默认颜色
activeColor	String		激活项颜色
size	String		点的大小

<pure-indicator-index>

名称	类型	默认值	说明
total	Number	0	总数量
current	Number	0	激活项下标
color	String		默认颜色
activeColor	String		激活项颜色
size	String		大小
fontSize	String		字体大小

<pure-indicator-line>

名称	类型	默认值	说明
total	Number	0	总数量
current	Number	0	激活项下标
color	String		默认颜色
activeColor	String		激活项颜色
width	String	100%	线的宽度
height	String	4px	线的高度

<pure-indicator-number>

名称	类型	默认值	说明
total	Number	0	总数量
current	Number	0	激活项下标
color	String		默认颜色
activeColor	String		激活项颜色
separator	String	100%	分隔符

<pure-indicator-progress>

名称	类型	默认值	说明
total	Number	0	总数量
current	Number	0	激活项下标
color	String		默认颜色
activeColor	String		激活项颜色
width	String	100%	进度条的宽度
height	String	4px	进度条的高度

<pure-indicator-title>

名称	类型	默认值	说明
list	Array	[]	数据列表
titleKey	String	title	标题键名
current	Number	0	激活项下标
color	String		默认颜色
activeColor	String		激活项颜色
fontSize	String		文本大小

事件

<pure-indicator>

名称	参数	说明
onItemClick	index	指示器元素项点击事件，line、number、progress 模式时无此事件

<pure-indicator-bar>

名称	参数	说明
onItemClick	index	指示器元素项点击事件

<pure-indicator-dot>

名称	参数	说明
onItemClick	index	指示器元素项点击事件

<pure-indicator-index>

名称	参数	说明
onItemClick	index	指示器元素项点击事件

<pure-indicator-title>

名称	参数	说明
onItemClick	index	指示器元素项点击事件

样式变量

<pure-indicator-bar>

名称	说明
--pure-indicator-display	显示方式
--pure-indicator-direction	方向
--pure-indicator-align-items	子项对齐方式
--pure-indicator-justify-content	子项对齐方式
--pure-indicator-gap	子项间距
--pure-indicator-color	默认颜色
--pure-indicator-active-color	激活项颜色
--pure-indicator-transition	过渡
--pure-indicator-bar-width	条的宽度
--pure-indicator-bar-height	条的高度
--pure-indicator-bar-border-radius	条的圆角大小

<pure-indicator-dot>

名称	说明
--pure-indicator-display	显示方式
--pure-indicator-direction	方向
--pure-indicator-align-items	子项对齐方式
--pure-indicator-justify-content	子项对齐方式
--pure-indicator-gap	子项间距
--pure-indicator-color	默认颜色
--pure-indicator-active-color	激活项颜色
--pure-indicator-transition	过渡
--pure-indicator-dot-size	点的大小

<pure-indicator-index>

名称	说明
--pure-indicator-display	显示方式
--pure-indicator-direction	方向
--pure-indicator-align-items	子项对齐方式
--pure-indicator-justify-content	子项对齐方式
--pure-indicator-gap	子项间距
--pure-indicator-color	默认颜色
--pure-indicator-active-color	激活项颜色
--pure-indicator-transition	过渡
--pure-indicator-index-size	索引项大小
--pure-indicator-index-radius	索引项圆角大小
--pure-indicator-index-font-size	索引项字体大小
--pure-indicator-index-font-weight	索引项字体粗细
--pure-indicator-index-active-font-weight	激活项字体粗细
--pure-indicator-index-border-width	索引项边框宽度
--pure-indicator-index-border-style	索引项边框类型
--pure-indicator-index-border-color	索引项边框颜色

<pure-indicator-line>

名称	说明
--pure-indicator-width	宽度
--pure-indicator-height	高度
--pure-indicator-radius	圆角大小
--pure-indicator-color	默认颜色
--pure-indicator-active-color	激活项颜色
--pure-indicator-transition	过渡

<pure-indicator-number>

名称	说明
--pure-indicator-current-font-size	当前数字字体大小
--pure-indicator-current-color	当前数字颜色
--pure-indicator-current-font-weight	当前数字字体粗细
--pure-indicator-total-font-size	总数字字体大小
--pure-indicator-total-color	总数字颜色
--pure-indicator-total-font-weight	总数字字体粗细
--pure-indicator-separator-font-size	分隔符字体大小
--pure-indicator-separator-color	分隔符颜色
--pure-indicator-separator-font-weight	分隔符字体粗细
--pure-indicator-separator-margin	分隔符外边距

<pure-indicator-progress>

名称	说明
--pure-progress-height	进度条高度
--pure-indicator-color	默认颜色
--pure-indicator-active-color	激活项颜色
--pure-indicator-transition	过渡

<pure-indicator-title>

名称	说明
--pure-indicator-padding	内边距
--pure-indicator-background	背景
--pure-indicator-height	高度