指示器 indicator

指示器组件。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 list 传入数据，title 模式时必传，其它模式可选。
• 通过 count 传入数据长度，非 title 模式时必传，title 模式时可选。
• 通过 current 设置当前选中的索引，所有模式必传。
• 通过 mode 设置模式，默认为 dot 模式。
• 通过 separator 设置 number 模式时的分隔符，默认为 /。

<template>
    <pure-indicator
        :list="list"
        :count="list.length"
        :current="current"
        :mode="mode"
        :separator="separator"
        @onClick="(index) => (current = index)"
    ></pure-indicator>
</template>

模式

• dot：圆点模式，对应 pure-indicator-dot 组件，也可以直接使用 pure-indicator-dot 组件。
• bar：条形模式，对应 pure-indicator-bar 组件，也可以直接使用 pure-indicator-bar 组件。
• line：线模式，对应 pure-indicator-line 组件，也可以直接使用 pure-indicator-line 组件。
• number：数字模式，对应 pure-indicator-number 组件，也可以直接使用 pure-indicator-number 组件。
• index：索引模式，对应 pure-indicator-index 组件，也可以直接使用 pure-indicator-index 组件。
• title：标题模式，对应 pure-indicator-title 组件，也可以直接使用 pure-indicator-title 组件。
• progress：进度模式，对应 pure-indicator-progress 组件，也可以直接使用 pure-indicator-progress 组件。

<template>
    <pure-indicator mode="dot"></pure-indicator>
    <pure-indicator mode="bar"></pure-indicator>
    <pure-indicator mode="line"></pure-indicator>
    <pure-indicator mode="number"></pure-indicator>
    <pure-indicator mode="index"></pure-indicator>
    <pure-indicator mode="title"></pure-indicator>
    <pure-indicator mode="progress"></pure-indicator>
</template>

位置

• 通过添加对应的辅助类，可以设置位置。

提示

辅助类使用规则

<template>
    <!-- 底部居中 -->
    <pure-indicator class="pure-indicator-bottom-center"></pure-indicator>
    <!-- 底部居左 -->
    <pure-indicator class="pure-indicator-bottom-left"></pure-indicator>
    <!-- 底部居右 -->
    <pure-indicator class="pure-indicator-bottom-right"></pure-indicator>
    <!-- 顶部居中 -->
    <pure-indicator class="pure-indicator-top-center"></pure-indicator>
    <!-- 顶部居左 -->
    <pure-indicator class="pure-indicator-top-left"></pure-indicator>
    <!-- 顶部居右 -->
    <pure-indicator class="pure-indicator-top-right"></pure-indicator>
    <!-- 左侧居中 -->
    <pure-indicator class="pure-indicator-left-center"></pure-indicator>
    <!-- 左侧居上 -->
    <pure-indicator class="pure-indicator-left-top"></pure-indicator>
    <!-- 左侧居下 -->
    <pure-indicator class="pure-indicator-left-bottom"></pure-indicator>
    <!-- 右侧居中 -->
    <pure-indicator class="pure-indicator-right-center"></pure-indicator>
    <!-- 右侧居上 -->
    <pure-indicator class="pure-indicator-right-top"></pure-indicator>
    <!-- 右侧居下 -->
    <pure-indicator class="pure-indicator-right-bottom"></pure-indicator>
</template>

静态布局

• 组件默认是 position: absolute 的，如果需要静态布局，可以添加 pure-indicator-static 类。

提示

辅助类使用规则

<template>
    <pure-indicator class="pure-indicator-static"></pure-indicator>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
hoverClass	同 view 的 hover-class	String	"pure-hover"	-	+1.0.0
list	数据列表	Array	[]	-	+1.0.0
current	激活项下标	Number	0	-	+1.0.0
count	数量	Number	0	-	+1.0.0
mode	模式	String	dot	bar、line、number、index、title、progress	+1.0.0
separator	number 模式的分隔符	String	/	-	+1.0.0
titleKey	title 模式的显示字段的名称	String	title	-	+1.0.0

Event

事件名	说明	回调参数	版本
onClick	点击事件	index: 点击项的下标	+1.0.0