能否在intro.js的引导消息中直接添加复选框或自定义HTML元素？

可以直接在intro.js的引导消息里插入自定义HTML元素（包括复选框），尽管官方文档没有专门提及这个特性，但intro.js支持直接在intro或title字段中写入HTML代码。

修改后的示例代码 #

const handleIntroMessage = () => {
  intro.setOptions({
    steps: [
      {
        element: '#lastname',
        intro: 'Last Name of the defendant here.',
        title: 'Last Name'
      },
      {
        element: '#firstname',
        // 直接在intro中插入复选框HTML
        intro: 'First Name of the defendant here.<br><input type="checkbox" id="intro-dont-show"> 不再显示此引导',
        title: 'First Name'
      }
    ],
    dontShowAgain: false
  });

  intro.start();

  // 监听复选框的change事件，实现自定义逻辑
  intro.on('onafterchange', () => {
    const checkbox = document.getElementById('intro-dont-show');
    if (checkbox) {
      checkbox.addEventListener('change', (e) => {
        if (e.target.checked) {
          // 结合intro.js自带配置实现不再显示
          intro.setOption('dontShowAgain', true);
          // 也可手动存入本地存储，持久化状态
          localStorage.setItem('intro-dont-show', 'true');
        }
      });
    }
  });
}

注意事项 #

• HTML安全性：如果引导内容来自用户输入，要做好XSS防护，避免注入恶意代码。
• 事件绑定时机：需确保引导步骤渲染完成后再绑定复选框事件，使用intro.js的onafterchange回调是稳妥的方式。
• 持久化逻辑：若需要“不再显示”功能，可结合intro.js自带的dontShowAgain配置，或自行通过localStorage保存状态，下次加载时判断是否跳过引导。

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