@adiynil/tourjs NPM

TourJS

🎯 一个轻量级的页面引导库，帮助用户快速了解网页功能。

✨ 特性

🚀 轻量级: 无依赖，体积小巧
🎨 可定制: 支持自定义样式和动画
🎯 智能定位: 自动计算最佳显示位置
⚡️ 性能优化: 智能的 z-index 管理和动画性能优化
📱 响应式: 自适应不同屏幕尺寸
🔧 易配置: 丰富的配置选项

📦 安装

npm install @adiynil/tourjs

🚀 快速开始

import { Tour } from '@adiynil/tourjs';

// 创建引导实例
const tour = new Tour({
  steps: [
    {
      target: '#step1',
      content: '这是第一步引导'
    },
    {
      target: '.step2',
      content: '这是第二步引导',
      placement: 'right'
    }
  ],
  config: {
    autoStart: true,
    zIndex: 'auto'
  }
});

// 开始引导
tour.run();

⚙️ 配置项

Tour 配置

interface TourConfig {
  // 是否自动跳过未找到的元素
  autoSkipInvalid: boolean;
  // 是否自动开始执行
  autoStart: boolean;
  // 基础层级，可以是具体数值或 'auto'
  zIndex: number | 'auto';
  // 滚动配置
  scroll?: {
    offset?: number;
    duration?: number;
  };
  // tooltip 配置
  tooltip?: {
    minWidth?: number;
    maxWidth?: number;
    defaultPlacement?: 'top' | 'right' | 'bottom' | 'left';
    defaultOffset?: number;
  };
  // 动画配置
  animation?: {
    duration?: number;
    easing?: string;
  };
}

步骤配置

interface TourStep {
  // 目标元素的选择器
  target: string;
  // 提示内容
  content: string;
  // 自定义样式
  style?: Partial<CSSStyleDeclaration>;
  // 定位配置
  placement?: 'top' | 'right' | 'bottom' | 'left';
  // 偏移量配置
  offset?: {
    mainAxis?: number;
    crossAxis?: number;
  };
}