步骤条
TIP
目前仅支持完全支持 vue3 的平台 小程序完全不兼容,实现方式不同,后续考虑重写这部分组件 使用原生 javascript
基本使用
vue
<!-- -->
<template>
<!-- <jp-steps :active="active"></jp-steps> -->
<jp-steps :active="active" icon-color="#10b981" icon="jp-icon-circle-plus">
<step v-for="f in 2" :key="f">
{{ f }}:
<div>{{ new Date() }}</div>
<div v-if="f % 2 == 0">{{ new Date() }}</div>
</step>
</jp-steps>
<jp-input v-model="active" class="mt-1"></jp-input>
</template>
<script lang="ts" setup>
const active = ref(1)
</script>
<style scoped lang="scss"></style>
type 类型
vue
<!-- -->
<template>
<p class="p-5">类型:高亮当前内容</p>
<jp-steps :active="active" type="current">
<step v-for="f in 2" :key="f">
{{ f }}:
<div>{{ new Date() }}</div>
<div v-if="f % 2 == 0">{{ new Date() }}</div>
</step>
</jp-steps>
<jp-input v-model="active" class="mt-1"></jp-input>
</template>
<script lang="ts" setup>
const active = ref(0)
</script>
<style scoped lang="scss"></style>
props
| Property | Type | Description |
|---|---|---|
| active | number | 当前选中. |
| type | 'default' or 'current' | 高亮模式 'default' or 'current'. |
| icon | string | icon |
| iconColor | string | iconColor |