使用bs-stepper组件时如何获取当前所处的步骤页面？

解决方案 #

你可以通过两种方式获取当前所在步骤：

• 直接读取stepper实例的私有属性_currentIndex，索引从0开始计数，对应你的步骤顺序：

var stepper = new Stepper($('.bs-stepper')[0]);
// 获取当前步骤索引（从0开始）
var currentStepIndex = stepper._currentIndex;
// 如需从1开始的步骤序号，直接加1即可
var currentStepNum = stepper._currentIndex + 1;

• 如果需要实时监听步骤切换的当前值，可以绑定shown.bs-stepper事件，每次切换步骤时自动获取最新值：

document.querySelector('.bs-stepper').addEventListener('shown.bs-stepper', function (event) {
  // 从事件参数中直接拿到当前步骤索引
  console.log('当前步骤索引：', event.detail.indexStep)
})

如果需要获取当前步骤对应的DOM元素，也可以配合索引获取：

var currentStepElement = document.querySelectorAll('.bs-stepper .step')[stepper._currentIndex];

内容的提问来源于stack exchange，提问作者user17417786