Angular13 + IntroJs：最后一步隐藏关闭（跳过）图标问题

方法一：利用IntroJS的步骤切换事件动态控制 #

通过IntroJS的onchange事件监听步骤切换，当到达最后一步时手动隐藏关闭按钮，其他步骤恢复显示：

import introJs from 'intro.js';

ngOnInit() {
  const intro = introJs();
  const steps = [
    { element: '#step1', intro: '第一步引导' },
    { element: '#step2', intro: '第二步引导' },
    { element: '#step3', intro: '最后一步引导' }
  ];

  intro.setOptions({ steps });

  // 监听步骤切换
  intro.onchange((_, stepIndex) => {
    const skipBtn = document.querySelector('.introjs-skipbutton') as HTMLElement;
    if (!skipBtn) return;

    // 判断是否为最后一步（索引从0开始）
    if (stepIndex === steps.length - 1) {
      skipBtn.style.display = 'none';
    } else {
      skipBtn.style.display = 'inline-block';
    }
  });

  intro.start();
}

方法二：CSS样式直接隐藏最后一步的关闭按钮 #

IntroJS给最后一步的弹窗容器添加了introjs-last类，直接通过CSS选择器定位隐藏：

.introjs-last .introjs-skipbutton {
  display: none !important;
}

注意：如果你的IntroJS样式有自定义优先级，可能需要调整CSS的权重确保生效。

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