vue项目中使用新手引导功能_intro.js

更新日期: 2020-09-25阅读: 4.3k标签: 插件

如何在vue项目中使用用intro.js新手引导功能呢?这里需要使用到vue-introjs插件,vue-introjs是在Vue中绑定intro.js所使用的。在使用vue-introjs前,需要先安装intro.js


npm安装

npm i intro.js --save
npm i vue-introjs --save


webpack配置

// webpack.config.js
{
plugins: [
new webpack.ProvidePlugin({
// other modules
introJs: ['intro.js']
})
]
}

如果是vue-cli3的项目,则在vue.config.js 

chainWebpack: config => {
config.plugin('provide').use(webpack.ProvidePlugin, [{
// other modules
introJs: ['intro.js']
}])
}


main.js中引入

在webpack中配置后,webpack.ProvidePlugin将会使用它,所以不需要在main.js中使用import introJs from 'intro.js'来引用

import VueIntro from 'vue-introjs';
import 'intro.js/introjs.css';
Vue.use(VueIntro);


页面中使用

需要在页面渲染完成后,使用

mounted: function () {
this.setGuide();
},
methods: {
setGuide() {
let data=[
{element: '.step_1',intro: '步骤1:对应class为.step_1的元素进行选择提示。',position: 'right'},
{element: '#step_2',intro: '步骤2:对应Id为#step_2的元素进行选择提示。',position: 'left'},
]
this.$intro().setOptions({
prevLabel: "上一步",
nextLabel: "下一步",
skipLabel: "跳过",
doneLabel: "完成",
steps:steps
}).oncomplete(()=> {
//点击结束按钮后执行的事件
}).onexit(()=> {
//点击跳过按钮后执行的事件
}).start()
},
}

如果不想使用steps的方式,我们可以直接在html中通过指令的方式来使用,html如下:

<div v-intro="'这是步骤1的引导提示内容'" v-intro-step="1"></div>
<div v-intro="'这是步骤2的引导提示内容'" v-intro-step="2"></div>


setOption关键字

主要参数如下:

prevLabel: "上一步", 
nextLabel: "下一步",
skipLabel: "跳过",
doneLabel: "结束",
tooltipPosition: 'bottom',/* 引导说明框相对高亮说明区域的位置 */
tooltipClass: '', /* 引导说明文本框的样式 */
highlightClass: '', /* 说明高亮区域的样式 */
exitOnEsc: true,/* 是否使用键盘Esc退出 */
exitOnOverlayClick: true,/* 是否允许点击空白处退出 */
showStepNumbers: true,/* 是否显示说明的数据步骤*/
keyboardNavigation: true,/* 是否允许键盘来操作 */
showButtons: true,/* 是否按键来操作 */
showBullets: true,/* 是否使用点点点显示进度 */
showProgress: false,/* 是否显示进度条 */
scrollToElement: true,/* 是否滑动到高亮的区域 */
overlayOpacity: 0.8, /* 遮罩层的透明度 */
positionPrecedence: ["bottom", "top", "right", "left"],/* 当位置选择自动的时候,位置排列的优先级 */
disableInteraction: false, /* 是否禁止与元素的相互关联 */
hintPosition: 'top-middle', /* 默认提示位置 */
hintButtonLabel: 'Got it',/* 默认提示内容 */

更多详细的使用此处不再赘述,vue-introjs的github地址:https://github.com/alex-oleshkevich/vue-introjs。


链接: https://www.fly63.com/article/detial/9673

对于前端开发,整理推荐好用的chrome插件或应用

向web前端开发者整理提供的chrome插件或应用:比如Postman、JSON Viewer、Page Ruler 、ChromeADB 等等

使用原生js开发插件的实现方法

作为前端开发,我们都习惯使用一些开源的插件例如jquery工具库,那么如何使用原生js来开发封装一个自己的插件呢?接下来就看一下怎么去开发一个自己的js插件,先上代码

typeahead.js_jquery input 搜索自动补全jQuery插件

jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法,用于完成自动补全功能,能够完成绝大部分表单自动补全的需求。

js轮播插件_轮播图js代码插件总汇

这篇文章为大家分享图片轮播插件,最全最简单最通用的 幻灯片轮播插件,pc端和移动端都可完美使用,能满足绝大部分网站的轮播需求。js轮播插件包括Swiper、slick、owl carousel2、jssor/slider 、iSlider 等

ios风格的时间选择插件

在上个项目中,客户希望时间选择插件可以是ios风格的那种,但是找了很久,发现并没有用vue的ios风格时间插件,于是自己便自己造了一个轮子.插件依赖于better-scroll和vue

前端最常用的vscode插件集

在前端开发中,使用Visual Studio Code有哪些你常用的插件?推荐几个自己喜欢的,不带链接,自己搜索安装吧。这些都是比较实用、前端必备的插件集

浏览器插件_常用谷歌浏览器插件推荐

常用谷谷歌浏览器确实没有其它国产软件的内置功能丰富。但是 Google 浏览器的的优点恰恰就体现在拥有超简约的界面,以及支持众多强大好用的扩展程序,用户能够按照自己的喜好去个性化定制浏览器。今天我就给大家介绍几款自己常用的插件。

sublime安装插件

安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录,也可以安装package control组件,然后直接在线安装

BlockUI详细用法_Jquery中ajax加载提示插件blickUI

BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为

vue项目中vscode格式化配置和eslint配置冲突

使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行、空格、单双引号、分号等各种格式问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!