uniapp 实现的步进指示器组件

狼性书生2025-03-14 13:04

采用 uniapp 实现的一款步进指示器组件，展示业务步骤进度等内容，对外提供"前进"、"后退"方法，让用户可高度自定义所需交互，适配 web、H5、微信小程序（其他平台小程序未测试过，可自行尝试）

可到插件市场下载尝试： https://ext.dcloud.net.cn/plugin?id=22603

  • 使用示例

使用示例

分别演示vue2、vue3 setup示例

vue2 写法

javascript 复制代码 
<template>
  <view>
		<view class="font-class">示例一：</view>
		<view>
			<view style="background-color: #272822; padding: 10px; margin: 10px; border-radius: 6px; color: #fff;">
				<wo-step-indicator :default-step="1" :options="steps" ref="stepIndicator1" @change="onChangeStep"></wo-step-indicator>
			</view>
			<view style="padding: 10px 0; margin: 0 10px;">
			  <view v-show="step === 1">
			    <view
			      style="height: 100px; width: 100%; border-radius: 6px; background-color: #299B48; color: #fff; display: flex; justify-content: center; align-items: center;">
			      步骤一
			    </view>
			  </view>
			  <view v-show="step === 2">
			    <view
			      style="height: 100px; width: 100%; border-radius: 6px; background-color:#FF5739; color: #fff; display: flex; justify-content: center; align-items: center;">
			      步骤二
			    </view>
			  </view>
			  <view v-show="step === 3">
			    <view
			      style="height: 100px; width: 100%; border-radius: 6px; background-color: #41A5E1; color: #fff; display: flex; justify-content: center; align-items: center;">
			      步骤三
			    </view>
			  </view>
			  <view v-show="step === 4">
			    <view
			      style="height: 100px; width: 100%; border-radius: 6px; background-color: #272822; color: #fff; display: flex; justify-content: center; align-items: center;">
			      步骤四
			    </view>
			  </view>
			</view>
		</view>
		<view class="font-class">示例二：</view>
		<view style="display: flex; gap: 10px;">
			<view class="step-class" style="margin-right: 0px;">
				<wo-step-indicator   ref="stepIndicator2" @change="onChangeStep"></wo-step-indicator>
			</view>
			<view style="margin: 10px 10px 10px 0; flex: 1;">
			  <view v-show="step === 1">
			    <view
			      style="height: 200px; width: 100%; border-radius: 6px; background-color: #299B48; color: #fff; display: flex; justify-content: center; align-items: center;">
			      步骤一
			    </view>
			  </view>
			  <view v-show="step === 2">
			    <view
			      style="height: 200px; width: 100%; border-radius: 6px; background-color:#FF5739; color: #fff; display: flex; justify-content: center; align-items: center;">
			      步骤二
			    </view>
			  </view>
			  <view v-show="step === 3">
			    <view
			      style="height: 200px; width: 100%; border-radius: 6px; background-color: #41A5E1; color: #fff; display: flex; justify-content: center; align-items: center;">
			      步骤三
			    </view>
			  </view>
			  <view v-show="step === 4">
			    <view
			      style="height: 200px; width: 100%; border-radius: 6px; background-color: #272822; color: #fff; display: flex; justify-content: center; align-items: center;">
			      步骤四
			    </view>
			  </view>
			</view>
		</view>
		<view class="font-class">自定义操作：</view>
		<view style="display: flex; gap: 10px; padding-top: 10px;">
		  <button @click="prevStep" :disabled="step <= 1">上一步</button>
		  <button @click="nextStep" :disabled="step >= steps.length">下一步</button>
		  <button v-show="step >= steps.length">完成</button>
		</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      steps: [
        {
          index: '1',
          name: 'Step 1',
        },
        {
          index: '2',
          name: 'Step 2',
        },
        {
          index: '3',
          name: 'Step 3',
        },
        {
          index: '4',
          name: 'Step 4',
        },
      ],
      step: 1,
      stepIndicator1: null,
			stepIndicator2: null
    };
  },
  methods: {
    prevStep() {
      this.$refs.stepIndicator1.prev();
			this.$refs.stepIndicator2.prev();
    },
    nextStep() {
      this.$refs.stepIndicator1.next();
			this.$refs.stepIndicator2.next();
    },
    onChangeStep(data) {
      this.step = data.step;
      console.log('Current step:', data);
    }
  }
};
</script>

<style>
.font-class {
	font-size: 12px;
	padding: 10px 10px 0 10px;
}
.step-class {
	background-color: #272822;
	color: #fff;
	padding: 15px;
	margin: 10px;
	border-radius: 6px;
}
</style>

vue3 setup写法

javascript 复制代码 
<template>
	<view>
		<view class="font-class">示例一：</view>
		<view>
			<view style="background-color: #272822; padding: 10px; margin: 10px; border-radius: 6px; color: #fff;">
				<wo-step-indicator :default-step="1" :options="steps" ref="stepIndicator1"
					@change="onChangeStep"></wo-step-indicator>
			</view>
			<view style="padding: 10px 0; margin: 0 10px;">
				<view v-show="step === 1">
					<view
						style="height: 100px; width: 100%; border-radius: 6px; background-color: #299B48; color: #fff; display: flex; justify-content: center; align-items: center;">
						步骤一
					</view>
				</view>
				<view v-show="step === 2">
					<view
						style="height: 100px; width: 100%; border-radius: 6px; background-color:#FF5739; color: #fff; display: flex; justify-content: center; align-items: center;">
						步骤二
					</view>
				</view>
				<view v-show="step === 3">
					<view
						style="height: 100px; width: 100%; border-radius: 6px; background-color: #41A5E1; color: #fff; display: flex; justify-content: center; align-items: center;">
						步骤三
					</view>
				</view>
				<view v-show="step === 4">
					<view
						style="height: 100px; width: 100%; border-radius: 6px; background-color: #272822; color: #fff; display: flex; justify-content: center; align-items: center;">
						步骤四
					</view>
				</view>
			</view>
		</view>
		<view class="font-class">示例二：</view>
		<view style="display: flex; gap: 10px;">
			<view class="step-class" style="margin-right: 0px;">
				<wo-step-indicator ref="stepIndicator2" @change="onChangeStep"></wo-step-indicator>
			</view>
			<view style="margin: 10px 10px 10px 0; flex: 1;">
				<view v-show="step === 1">
					<view
						style="height: 200px; width: 100%; border-radius: 6px; background-color: #299B48; color: #fff; display: flex; justify-content: center; align-items: center;">
						步骤一
					</view>
				</view>
				<view v-show="step === 2">
					<view
						style="height: 200px; width: 100%; border-radius: 6px; background-color:#FF5739; color: #fff; display: flex; justify-content: center; align-items: center;">
						步骤二
					</view>
				</view>
				<view v-show="step === 3">
					<view
						style="height: 200px; width: 100%; border-radius: 6px; background-color: #41A5E1; color: #fff; display: flex; justify-content: center; align-items: center;">
						步骤三
					</view>
				</view>
				<view v-show="step === 4">
					<view
						style="height: 200px; width: 100%; border-radius: 6px; background-color: #272822; color: #fff; display: flex; justify-content: center; align-items: center;">
						步骤四
					</view>
				</view>
			</view>
		</view>
		<view class="font-class">自定义操作：</view>
		<view style="display: flex; gap: 10px; padding-top: 10px;">
			<button @click="prevStep" :disabled="step <= 1">上一步</button>
			<button @click="nextStep" :disabled="step >= steps.length">下一步</button>
			<button v-show="step >= steps.length">完成</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const steps = ref([
	{ index: '1', name: 'Step 1' },
	{ index: '2', name: 'Step 2' },
	{ index: '3', name: 'Step 3' },
	{ index: '4', name: 'Step 4' },
]);

const step = ref(1);
const stepIndicator1 = ref(null);
const stepIndicator2 = ref(null);

const prevStep = () => {
	stepIndicator1.value.prev();
	stepIndicator2.value.prev();
};

const nextStep = () => {
	stepIndicator1.value.next();
	stepIndicator2.value.next();
};

const onChangeStep = (data) => {
	step.value = data.step;
	console.log('Current step:', data);
};
</script>

<style>
.font-class {
	font-size: 12px;
	padding: 10px 10px 0 10px;
}

.step-class {
	background-color: #272822;
	color: #fff;
	padding: 15px;
	margin: 10px;
	border-radius: 6px;
}
</style>
相关推荐
小白上线*^_^*5 分钟前
Vue——Axios
前端·javascript·vue.js
一直在学习的小白~21 分钟前
HTML字符串转换为React元素实现
前端·react.js·html
gxn_mmf37 分钟前
典籍知识问答模块AI问答功能feedbackBug修改+添加对话名称修改功能
前端·后端·bug
samroom1 小时前
Webpack基本用法学习总结
前端·学习·webpack
万能程序员-传康Kk2 小时前
食物数据分析系统vue+flask
前端·vue.js·flask
老华带你飞3 小时前
音乐网站|基于SprinBoot+vue的音乐网站(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·音乐网站
Mark.10243 小时前
uniapp项目打包的微信小程序，设置uni-popup type=“bottom“时，底部有空隙
微信小程序·uni-app·notepad++
是程序喵呀3 小时前
uni-app使用web-view组件APP实现返回上一页
前端·uni-app
Joker Zxc4 小时前
【前端基础】9、CSS的动态伪类（hover、visited、hover、active、focus）【注：本文只有几个粗略说明】
前端·css
2401_837088504 小时前
CSS flex:1
前端·css
热门推荐
01从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑02KGG转MP3工具|非KGM文件|解密音频03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05苍穹外卖面试总结06西电B测-计算机网络综合实验(含验收问题)07Coze扣子平台完整体验和实践（附国内和国际版对比）08yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记09DeepSeek各版本说明与优缺点分析10YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU