分类信息网站开发需求方案,成功英语网站,新能源电动汽车哪个牌子的质量好,wordpress demo最近公司经理让我在项目上做一个新用户引导#xff0c;讲真这玩意我只在APP上看见过#xff0c;网页上没啥功能啊#xff0c;还需要引导#xff01; 没办法#xff0c;刚它#xff01;#xff01;#xff01;在网上查了点资料 Vue 基本上都是 intro.js 和 driver.js 两… 最近公司经理让我在项目上做一个新用户引导讲真这玩意我只在APP上看见过网页上没啥功能啊还需要引导 没办法刚它 在网上查了点资料 Vue 基本上都是 intro.js 和 driver.js 两个插件 这两个插件intro.js 好像是比driver.js 要出名这么一丢丢我个人还是推荐dirver.js intor.js 在路由切换以后遮罩层就会叠加一层叠在一起就跟Av画质一样后面都看不见intro.js支持的dirver.js都支持主要dirver.js 简单粗暴适合硬撸所以还是选择dirver.js YY一下我一直为没有搞懂这两个插件在githun 项目演示为什么不把文档做成引导的来讲解文档这样多方便也符合插件本身 npm 安装 npm install driver.jsyarn 安装 yarn add driver.js这里我们直接在mian.js 里面配置我感觉做个都不可能只是在一个也main引导其他也页面也要引导main.js 配置import Vue from vueimport Driver from driver.jsimport driver.js/dist/driver.min.css 直接封装一下Vue.prototype.$Driver new Driver({ classname:“scoped class”// 为你的指示模块添加类名 如果你要取消 某一个按钮比如“上一步””下一步“”完成“的 这个类名还是要加上的 animate:true//在更改突出显示的元素时设置动画不透明度0.75//背景不透明度0表示只有弹出窗口没有覆盖padding:10//元素与边缘的距离allowclose:true//单击覆盖是否应关闭overlay click next:false//单击overlay click是否转到下一步donebtntext:“完成”//最后一个按钮上的文本closebtnext:关闭//此步骤的“关闭”按钮上的文本NextBtnText:一步//此步骤的下一步按钮文本prevbtnext:“上一步”//此步骤的上一个按钮文本show buttons:false//不在页脚中显示控件按钮 keyboardcontrol:true//允许通过键盘进行控制转义为“关闭”箭头键为“移动”。scrollintoview options://我们尽可能使用scrollintoview如果需要请在此处传递它的选项onHighlightStarted:element//当要突出显示元素时调用onHighlighted:element//当element完全突出显示时调用OnDeselected:element//取消选择element后调用onresetelement//当要清除覆盖时调用on next:element//在任何步骤上移动到下一步时调用onPrevious:element//在任何步骤上移动到下一步时调用 })需要配置一下steps可以用js 引用 也可以直接在data里面配置const steps [ { element: #guide-menu, // 需要引导展示的iD popover: { title: 菜单导航, //展示模块标题 description: 点击菜单可切换右侧菜单内容, // 展示模块类容 position: right // 模块的位置 可以定位 看自己了 }]export default steps在页面直接this.$Driver调用就可以了引入steps调用方法:import steps from ../plugins/steps this.$driver.defineSteps(steps) //传入配置参数 this.$driver.start() // 开始执行dirver基本上这样就可以实现基本功能了如果从这个路由跳转到下个路由 那么需要再引一遍dirver.js 就可以了 import steps from ../plugins/steps this.$driver.defineSteps(steps) // 从新配置的参数 this.$driver.start() // 开始执行dirver 这样虽然没什么毛病,但是仔细一想老子辛辛苦苦写的用户引导 你不按步骤走,直接点跳过,我心里面还是不怎么乐意,我们写了半天代码你点一个完成这样好像不太合适,所以我要把完成什么的都禁止掉(来自邪恶程序员的狂笑),dirver.js 并没有提供想对的禁止按钮的方法,但是提供了自定义类名,而且还有单独步骤的自定义类名,这一点我感觉真特么好啊, popoverClassBut // 这是我自己自定义的类名 .popoverClassBut .driver-clearfix .driver-close-btn ,.popoverClassBut .driver-clearfix .driver-prev-btn{display: none !important; } 这样就可以为所欲为强制用户走我们为他规划好的路线了 ^_^为单独一个引导添加独立的属性,也可以添加事件,添加事件必须用JS来导出,不能用在data里面const stepDefinition { element some-item //查询选择器字符串或要突出显示的节点 stageBackground fffffff //这将覆盖驱动程序 popover中设置的一个 { //如果为空则不会有弹出窗口给定 className popover-class // className以包装此特定步骤popover以及Driver选项 标题中的常规className Title // popover 描述中的标题 描述 // popover的主体 showButtons false //不显示页脚中的控制按钮 doneBtnText Done //最后一个按钮上的文本 closeBtnText Close //关闭按钮上的文字 nextBtnText 下一步 //下一个按钮文字 prevBtnText 上一页 //上一页按钮文字 } onNext : ( {} //从当前步骤 转到下一步时调用onPrevious : ( {} //从当前步骤移动到上一步时调用 };重之中重 我们的项目里面有很多样式都会用到position:fixed; 而dorver.js的也是position:fixed;z-index:100000;所以基本上我们的样式就会被覆盖 而起不到引导的效果就像这个一样 用的是element的 这一块还是现实的白屏 弹出框都是position:fixed; 这种情况我只需要吧元素的z-index 设置的比dirver高就可以了 也可以再methods里面设置 this.$driver.defineSteps(steps) this.$driver.start()var driver document.getElementById(driver-page-overlay)var highlighted document.getElementById(driver-highlighted-element-stage) driver.style.cssText z-index:1000!important; highlighted.style.cssText z-index:1000!important; // 我需要引导展示的元素这个时候我们发现你要引导用户去点击某一个餐单你希望是这样 只能按照你的规定点击你要的菜单如果是这样你把z-index设置比dirver.js 高 就不行这样会把所有的菜单都显示出来,达不到我们想到的效果 ,把单独的元素这是z-index :100000000 也不行 因为他的父级没有dirver.js 高 所有还是会被隐藏. 我这边试了很多方法都不行 不可能因为一个新用户引导而取消老子菜单置顶吧 ,然后我发现顶用dirver.js 的时候会全局加上一个 driver-fix-stacking的类名 真的是有这个大宝贝不早说 浪费半天表情, 我们只需要在 .driver-fix-stacking .header {position:relative;} 就可以 这样达到我们想要的效果了
