Vue 新手引导标签

安装

npm install driver.js --save

代码

1、存放每一步的提示信息
utils - driver.js

export default [{element: '#some-element1',popover: {title: '第一项',description: '第一项的描述',position: 'bottom',}},{element: '#some-element2',popover: {title: '第二项',description: '第二项的描述',position: 'top',}},
]

2、挂载实例对象
main.js

import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import Vue from 'vue'
Vue.prototype.$driver = new Driver()

自定义提示语配置

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css'
import Vue from 'vue'
Vue.prototype.$driver = new Driver({  doneBtnText: '完成',              // Text on the final buttoncloseBtnText: '关闭',            // Text on the close button for this stepstageBackground: 'salmon',       // Background color for the staged behind highlighted elementnextBtnText: '下一步',              // Next button text for this stepprevBtnText: '上一步',          // Previous button text for this step
})

3、在页面中使用

<div id="some-element1">第一个</div>
<div id="some-element2">第二个</div>

import driverStep from "@/utils/driver"

// 在mounted生命周期或方法中执行下述代码
this.$driver.defineSteps(driverStep)
this.$driver.start()

// 方法
start () {this.$nextTick(() => {this.$driver.defineSteps(driverStep)this.$driver.start()})
}

问题

1、当要高亮的元素的父级或父辈级的样式为固定定位fixed时，高亮显示不出内容。需要将固定定位改为绝对定位absolute。

Vue 新手引导标签相关推荐

Vue里标签嵌套限制问题解决------解析DOM模板时注意事项：
Vue里标签嵌套限制问题解决------解析DOM模板时注意事项: 参考文章: (1)Vue里标签嵌套限制问题解决------解析DOM模板时注意事项: (2)https://www.cnblogs. ...
Vue本地图片循环加载显示不出来，vue img标签 :src地址拼接
Vue本地图片循环加载显示不出来,vue img标签 :src地址拼接上代码: <img:src="img"alt="banner" /> dat ...
vue实现标签云，让你的标签动起来
欢迎大家进群,一起探讨学习微信公众号,每天给大家提供技术干货博主技术笔记博主网站地址1 博主网站地址2 博主开源微服架构前后端分离技术博客项目源码地址,欢迎各位star vue实现标签云,让你的 ...
vue给标签动态绑定title
vue给标签动态绑定title 在利用vue开发时,如果标签宽度比较小,我们需要利用 overflow:hidden;text-overflow:ellipsis;white-space: nowra ...
vue修改标签页logo图片
vue修改标签页logo图片由于vue2和vue3的项目结构不同,所以修改方式不一样. 1.vue2 首先static文件夹下放入ico图标然后修改webpack.dev.conf.js文件 ne ...
vue 实现标签云效果全码
vue实现标签云 <template><div class="tagcloud-all" ref="tagcloudall" @click=& ...
Vue input标签 email和手机号输入验证
Vue input标签 email和手机号输入验证 1. email邮箱验证规则 2. 手机号正则表达式验证规则 vue写法: <script> export default {data( ...
VUE -- 自定义控件(标签)
首先我们在 src目录下新建一个目录叫"component",建一个mycomponent.vue文件,然后也让他打2句话吧 ? 1 2 3 4 5 6 7 8 9 10 11 ...
html自定义属性冒号,vue中标签上的属性加冒号与不加冒号的区别
今天vue的项目中,因为很多结构一样的条目,所以想到了使用循环.但是问题来了,每个条目的图标不一样,这就需要在循环中依次添加不同的字体图标的类名.直接使用class来操作,结果没有报错,但是图标也没有 ...

Vue 新手引导标签

安装

代码

1、存放每一步的提示信息
utils - driver.js

2、挂载实例对象
main.js

自定义提示语配置

3、在页面中使用

问题

Vue 新手引导标签相关推荐

最新文章

热门文章

Vue 新手引导标签

安装

代码

1、存放每一步的提示信息 utils - driver.js

2、挂载实例对象 main.js

自定义提示语配置

3、在页面中使用

问题

Vue 新手引导标签相关推荐

最新文章

热门文章

1、存放每一步的提示信息
utils - driver.js

2、挂载实例对象
main.js