vue步骤引导插件 vue-intro

1、安装依赖

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

2、在main.js中引入

import intro from 'intro.js' // introjs库
import 'intro.js/introjs.css' // introjs默认css样式

3、使用方式：data 内绑定标签元素的选择器数组

setGuide() {let data = [{ element: document.querySelector('.el-upload-draggr'), intro: '<img src="https://resources.dudao360.com/ddzs%2Fddzs01.GIF"  alt=""  style="width: 100%;"><p style="margin-top: 10px;text-align: center">先把文件拖进来或者上传到这里，系统可以自动选择公告类型了，快来试试吧</p>',position: 'right' },{ element: document.querySelector('.el-upload-draggr'),intro: '步骤2：对应Id为#step_2的元素进行选择提示。', position: 'left' }]this.$intro().setOptions({steps: data, /*绑定数组data*/prevLabel: "上一步",nextLabel: "下一步",skipLabel: "跳过",doneLabel: "完成",tooltipPosition: 'bottom',/* 引导说明框相对高亮说明区域的位置 */tooltipClass: 'intro-tooltip', /* 引导说明文本框的样式 */highlightClass: 'intro-highlight', /* 说明高亮区域的样式 */exitOnEsc: true,/* 是否使用键盘Esc退出 */exitOnOverlayClick: true,/* 是否允许点击空白处退出 */showStepNumbers: false,/* 是否显示说明的数据步骤*/keyboardNavigation: true,/* 是否允许键盘来操作 */showButtons: true,/* 是否按键来操作 */showBullets: true,/* 是否使用点点点显示进度 */showProgress: false,/* 是否显示进度条 */scrollToElement: true,/* 是否滑动到高亮的区域 */overlayOpacity: 0.8, /* 遮罩层的透明度 */positionPrecedence: ["bottom", "top", "right", "left"],/* 当位置选择自动的时候，位置排列的优先级 */disableInteraction: true, /* 是否禁止与元素的相互关联 */hintPosition: 'top-middle', /* 默认提示位置 */hintButtonLabel: 'Got it'/* 默认提示内容 */}).oncomplete(() => {//点击结束按钮后执行的事件}).onexit(() => {//点击跳过按钮后执行的事件}).start()
}

效果图：

vue步骤引导插件 vue-intro相关推荐

Vue Google浏览器插件 Vue Devtools无法使用的解决办法
1.插件安装不必多说一定要用Vue.js 开发版 Vue.min.js 在控制面板就不会显示 2.本地调试用的是file://协议修改插件允许访问文件网址打上对勾转载于:https ...
Vue的使用 -- 基于Vue搭建前端页面
Vue的使用 – 基于Vue搭建前端页面首先,用到的前端技术只有 Vue.Element-ui.axios.Echarts,至于其它的技术点,我一个后端很少接触. 其次,Echarts 我也不怎么会 ...
Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset
Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件和 Preset 文章目录 Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件 ...
Vue（Vuex插件）
一.Vuex的介绍 1. 概念专门在Vue中实现集中式状态数据管理的一个Vue插件,对Vue的应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信. ...
vue调用cordova 插件_Vue.js 使用cordova camera插件调取相机
本文给出在vue.js里如何使用cordova的插件完成调取相机及图库,并完成图片上传的操作. 具体的操作步骤如下第一步:在cordova项目下安装cordova-plugin-camera插件 c ...
vue脚手架安装以及vue脚手架创建项目（详细步骤）
系列文章: 文章目录 node.js安装 vue环境安装 vue创建项目命令行方式创建使用UI界面搭建 idea导入vue项目学习Vue不需要学会Node,Vue是前端框架,nodejs是服务端 ...
vue 分步引导组件_引导卡组件：完整介绍
vue 分步引导组件 In this article, I'm going to introduce you to the Bootstrap card component and walk you ...
vue 在浏览器控制台怎么调试谷歌插件vue Devtools
vue 在浏览器控制台怎么调试谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...
vue连线插件_vue 插件集合
element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI ...

vue步骤引导插件 vue-intro

vue步骤引导插件 vue-intro相关推荐

最新文章

热门文章