driver-any v0.0.7

👨介绍/Why

🚀 Driver-any能够帮助你更加快速的自定义化的为你页面中添加引导步骤, 只需简单的配置步骤即可呈现想要的引导用户快速使用网站的效果.

💻使用/Use

引入样式文件

⭐ 在使用前你应该及时的引用来自Driver-any的样式文件, 该文件中涵盖着默认引导步骤所需要的样式.

import "driver-any/dist/index.css"

使用Driver-any

🚀 简单使用

import "driver-any/dist/index.css"
import { DriverAny } from "driver-any";

// 通过driver包中导出的DriverAny类产生一个实例
const driver = new DriverAny();

// 自定义引导步骤的每一步
driver.configurationSteps([{
    domSelector: "#step1", // 该步骤所引导的元素的选择器
    stepDesc: "This is the descriptor for step one", // 该步骤的步骤描述
    pushComponentPosition: "top" 
}, {
    domSelector: "#step2",
    stepDesc: "This is the descriptor for step two",
    pushComponentPosition: "right"
}]);

// 最后启动我们设定好的引导步骤
driver.start();

🏂 更加自由的使用

import { DriverAny } from "driver-any";

// 通过driver包中导出的DriverAny类产生一个实例
const driver = new DriverAny({
    pushComponentPosition: "top", // 默认步骤推动元素位于引导元素的哪个方位
    ifUsePushComponent: true, // 是否使用自己所编写的引导步骤元素
    ifClickMaskCloseStep: false, // 点击遮罩层是否可关闭
    animation: true, // 动画过渡效果
    onCloseCallback: () => {console.log("close");}, // 引导步骤关闭时触发的回调函数
    onFinishCallback: () => {console.log("finish");}, // 引导步骤完成时触发的回调函数
    onNextCallback: (item) => {console.log("下一步", item);}, // 引导步骤的下一步触发时触发的回调函数
    onPrevCallback: (item) => {console.log("上一步", item);}, // 引导步骤的上一步触发时触发的回调函数
});

// 自定义引导步骤的每一步
driver.configurationSteps([{
    domSelector: "#step1", // 该步骤所引导的元素的选择器
    stepDesc: "This is the descriptor for step one", // 该步骤引导的描述语
    customizedPushComponent: "#step1-form",// 使用自己所书写的推动引导步骤的元素的选择器
    pushComponentPosition: "top" // 该步骤元素位于引导元素的哪个方位
}, {
    domSelector: "#step2",
    stepDesc: "This is the descriptor for step two",
    customizedPushComponent: "#step2-form",
    pushComponentPosition: "right"
}]);

// 最后启动我们设定好的引导步骤
driver.start();

参数/Params

DriverAny

📚 更多功能, 敬请期待...