npm 安装: npm install driver.js

//用户引导
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
Vue.prototype.$driver = new Driver({
allowClose: false, //禁止点击外部关闭
doneBtnText: '完成', // 完成按钮标题
closeBtnText: '关闭', // 关闭按钮标题
stageBackground: '#fff', // 引导对话的背景色
nextBtnText: '下一步', // 下一步按钮标题
prevBtnText: '上一步', // 上一步按钮标题
})

  

showHelp() {
const driver = this.$driver;
// 定义介绍的步骤
driver.defineSteps([
{
element: ".chooseHelp",
popover: {
title: "选课帮助",
description: "1.点击加入选课栏,可以把课程添加到选课栏",
position: "top"
}
}
// {
// element: '#',
// popover: {
// title: '选课帮助',
// description: '2.刚才所选的课程 全部都在这里哦!',
// position: 'left'
// }
// }
]); // 开始介绍
driver.start();
},
<el-button round icon="iconfont icon-bangzhu" class="chooseHelp" @click="showHelp()" >选课帮助</el-button>

.chooseHelp {
background: linear-gradient(#01a2f0, #68d3f6);
color: #fff;
border: none;
margin-bottom: 20px;
}

参考文档:https://zhuanlan.zhihu.com/p/80360372

vue 用driver 添加用户引导的更多相关文章

  1. vue.js 作一个用户表添加页面----初级

    使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...

  2. 【译】如何使用Vue过渡效果来提升用户体验

    在Vue应用中添加过渡效果是一个可以使你的项目感觉更专业的简单方法.通过提升用户体验,可以使你的网站留住更多的用户以及提高转化率. 只需要简单的处理就可以获得巨大的回报,何乐而不为? 在这个指南中,我 ...

  3. iOS开发 首次启动显示用户引导,第二次启动直接进入App,UIScrollView,UIPageControl,NSUserDefaults

    首先创建一个引导图的控制器类 UserGuideViewController.h和UserGuideViewController.m #import <UIKit/UIKit.h> #im ...

  4. DAO设计模式 -- 使用数据库连接类连接MySql数据库并实现添加用户

    1. DAO简介    DAO设计模式是属于J2EE数据库层的操作,使用DAO设计模式可以简化大量代码,增强程序的可移植性. 2. DAO各部分详解    DAO设计模式包括5个重要的部分,分别为数据 ...

  5. 使用 StoryBoard 的时候加入用户引导页面

    如果想让一个APP加上引导页面是一个非常完美的举动 但是,总会遇到一些问题 (不要忘记在APDelegate里面加上用户引导页面的头文件和程序启动时的第一个页面哦) 情况一:纯代码 判断是否是第一次启 ...

  6. 基于vue.js的简单用户管理

    功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...

  7. Mybatis(二)入门程序-通过id查找用户、模糊查找用户、添加用户、删除用户

    根据下图myBatis的架构,创建一个使用MyBatis的工程.       一.配置MyBatis 环境(如图) 1.sqlMapConfig.xml 首先,导入jar包(上图右边)并加载路径,然后 ...

  8. vue.js简单添加和删除

    这只是个简单的添加和删除,没有连接后台数据的 <%@ page language="java" contentType="text/html; charset=UT ...

  9. iOS开发之应用首次启动显示用户引导

    这个功能的重点就是在如何判断应用是第一次启动的. 其实很简单 我们只需要在一个类里面写好用户引导页面  基本上都是使用UIScrollView 来实现, 新建一个继承于UIViewController ...

随机推荐

  1. GhostScript 沙箱绕过(命令执行)漏洞(CVE-2018-19475)

    影响范围 Ghostscript 9.24之前版本 将POC作为图片上传,执行命令,抓包 POST /index.php HTTP/1.1 Host: target Accept-Encoding: ...

  2. 除了Swagger UI,你还能选择 IGeekFan.AspNetCore.RapiDoc

    IGeekFan.AspNetCore.RapiDoc 看到博客园上的这个文章,说了下Knife4J,评论里有人推荐RapiDoc,放了几个图,看了下,还不错. 心里 便有个想法,借着上次研究 Kni ...

  3. 【爬虫系列】1. 无事,Python验证码识别入门

    最近在导入某站数据(正经需求),看到他们的登录需要验证码, 本来并不想折腾的,然而Cookie有效期只有一天. 已经收到了几次夜间报警推送之后,实在忍不住. 得嘞,还是得研究下模拟登录. 于是,秃头了 ...

  4. POJ 1190 生日蛋糕题解

    题目地址:http://poj.org/problem?id=1190 一道很有趣的搜索题--主要是剪枝-- 我弄了5个剪枝: 1.当前剩余层数>=上层半径,剪掉 2.当前剩余层数>=上层 ...

  5. 2020年度钻石C++C学习笔记(3)--《博学谷》

    1.Unix/Linux操作系统介绍 1.1 操作系统的作用 1.1.1 操作系统的目标 l 方便:使计算机系统易于使用 l 有效:以更有效的方式使用计算机系统资源 l 扩展:方便用户有效开发.测试和 ...

  6. Javac 编译器

    编译过程 Javac 编译过程大致可以分为1个准备过程和3个处理过程: 准备过程:初始化插入式注解处理器. 解析与填充符号表过程,包括: 词法.语法分析,将源代码的字符流转变为标记集合,构造出抽象语法 ...

  7. javaSE面向对象编程

    面向对象编程 构造器 构造器就是和类名相同但无返回类型的方法. public class Person { //一个类即使什么都不写,它也会存在一个方法 //显示的定义构造器 String name; ...

  8. TCP拥塞控制详解

    1. 拥塞原因与代价 拥塞的代价 当分组的到达速率接近链路容量时,分组经历巨大的排队时延. 发送方必须执行重传以补偿因为缓存溢出而丢弃的分组. 发送方在遇到大时延时进行的不必要重传会引起路由器利用其链 ...

  9. connect()函数阻塞问题

    方法一:采用select 在学习嵌入式Linux网络编程中,很多同学都发现了一个问题,那就是调用connect函数时,如果服务端关闭,客户 端调用connect()函数时,发现阻塞在那里,而且利用ct ...

  10. SpringMVC学习04(数据处理及跳转)

    4.数据处理及跳转 4.1结果跳转方式 4.1.1 ModelAndView 设置ModelAndView对象 , 根据view的名称 , 和视图解析器跳到指定的页面 . 页面 : {视图解析器前缀} ...