使用插件：https://kamranahmed.info/driver.js/
在vue-cli中搜索依赖
driver.js 安装即可
找到你要引导的vue页面
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
//新手引导框架引入 import Driver from 'driver.js' // import driver.js import 'driver.js/dist/driver.min.css' // import driver.js css ...... ..... mounted() { const driver = new Driver() driver.defineSteps([ { element: '#first-element-introduction', popover: { className: 'first-step-popover-class', title: '步骤一：选择训练音频', description: '请点击此条音频', position: 'left', }, }, { element: '#second-element-introduction', popover: { title: '步骤二：自动播放！认真听', description: '请等待音频播放完毕！', position: 'top', }, }, { element: '#third-element-introduction', popover: { title: '步骤三：自动录音', description: '请复述当前音频', position: 'right', }, }, ]) // Start the introduction driver.start() }, |
当然在你的html模板中要有相关的元素id属性
|
1 2 3 4 5 |
<div id="third-element-introduction" class="section__example"> <h4 id="first-element-introduction" class=""><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">创建功能介绍</font></font></h4> <p id="second-para-feature-introductions" class=""><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">您还可以进行功能强大的功能介绍，以指导用户有关功能的信息。</font><font style="vertical-align: inherit;">只需提供一个步骤数组，其中每个步骤都指定一个要突出显示的元素。</font></font></p> <p id="third-para-feature-introductions" class=""><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">下面是一个简单的示例，向您展示如何结合介绍中的步骤。</font></font></p> </div> |