度娘网站桃花怎么做,公众平台登录,长沙影楼网站建设,免费建网站软件系统下载#xff1a;利用Intro.js实现简单的新手引导
npm install intro.js --save
yarn add intro.js
第一步#xff1a;在我们需要引导的页面引入
import introJs from intro.js;
import intro.js/introjs.css; //css是下载成功后就有的
第二步#xff1a;在组件页面 c…下载利用Intro.js实现简单的新手引导
npm install intro.js --save
yarn add intro.js
第一步在我们需要引导的页面引入
import introJs from intro.js;
import intro.js/introjs.css; //css是下载成功后就有的
第二步在组件页面 const intro: any useRef(null);useEffect(() {const hasSeenIntro localStorage.getItem(hasSeenIntro); //在这里进行判断判断是否已经引导过如果是则不再进行if (!hasSeenIntro) {intro.current introJs();intro.current.setOptions({steps: [// 引导步骤配置{element: .one, // 要引导的元素的选择器或DOM节点intro: 可以根据这里查看我们数据的数据, // 步骤的简要介绍position: right // 引导框相对于目标元素的位置},{element: .topMessage, // 要引导的元素的选择器或DOM节点intro: 这里可以查看信息以及其数据, // 步骤的简要介绍position: right // 引导框相对于目标元素的位置},{element: .three, // 要引导的元素的选择器或DOM节点intro: 点击这里可以跳转到对应页面, // 步骤的简要介绍position: right // 引导框相对于目标元素的位置}],overlayOptions: {backgroundColor: rgba(128, 128, 128, 0.5) // 设置背景颜色为灰色且透明},highlightClass: custom-highlight, // 自定义选中框的类名highlightPadding: 10, // 自定义选中框的内边距initialStep: 0 // 设置初始步骤为第一步索引为0});intro.current.start(); // 启动引导localStorage.setItem(hasSeenIntro, true); // 记录用户已经执行过引导}}, []);
那么根据以上的示例那么也相信我们在别的框架中也可以熟练的应用了。
以上则是intro实现效果的一些简单的应用那么如果想知道更多则可以去查看以下官网
Install Intro.js | Intro.js Docs
