Intro.js如何结合dontShowAgain与JSON配置steps解决setOptions覆盖问题

.setOptions() 每次调用会全量覆盖历史传入的配置，分两次传参必然出现后一次覆盖前一次的问题，正确做法是将两类配置合并到同一个配置对象，单次调用.setOptions()传入即可。

具体实现步骤 #

• 先整理好JSON格式的引导步骤steps数组，确保每个步骤的元素选择器、引导文案、弹出位置等字段符合配置规范
• 在同一个配置对象中追加「不再提示」相关配置项，必填和常用可选配置如下：
  • dontShowAgain: true：开启引导弹窗底部的“不再显示”复选框
  • dontShowAgainLabel: '不再显示此引导'：自定义复选框旁的显示文案
  • dontShowAgainCookie: 'your_guide_mark'：自定义存储用户选择状态的本地存储键名，避免和页面其他存储键冲突
  • dontShowAgainCookieDays: 30：设置用户“不再显示”选择的有效期，单位为天

代码示例 #

// 从独立JSON文件/接口获取的步骤配置，也可以直接写在配置对象里
const jsonSteps = [
  {
    element: '#nav-menu',
    intro: '这里是站点导航栏，可以跳转到各个功能模块',
    position: 'bottom'
  },
  {
    element: '#search-input',
    intro: '在这里输入关键词可以快速检索内容',
    position: 'right'
  }
];

// 合并所有配置
const guideConfig = {
  steps: jsonSteps,
  // 不再提示功能配置
  dontShowAgain: true,
  dontShowAgainLabel: '下次不再弹出该引导',
  dontShowAgainCookie: 'home_guide_shown',
  dontShowAgainCookieDays: 365,
  // 其他全局配置可统一写在这里
  nextLabel: '下一步',
  prevLabel: '上一步',
  skipLabel: '跳过',
  doneLabel: '我知道了'
};

// 单次传入所有配置启动引导，不会出现配置覆盖问题
introJs().setOptions(guideConfig).start();

注意：如果你的steps配置是异步加载的，等异步请求拿到JSON格式的步骤数据后，再和其他配置合并传入即可，不需要拆分多次调用.setOptions()。

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