VUE项目中如何使用vue-tour 新手引导

最新推荐文章于 2024-08-12 11:27:34 发布

Making_Bug

最新推荐文章于 2024-08-12 11:27:34 发布

阅读量5.1k

点赞数 2

本文链接：https://blog.csdn.net/Making_Bug/article/details/103487964

版权

本文介绍了在Vue项目中使用vue-tour进行新手引导的方法，特别提醒在多个页面使用时要注意id的唯一性，避免因id重复导致的提示位置错误问题。

摘要由CSDN通过智能技术生成

vue-tour实现效果

vue-tour实现相当于给一个div添加了一个tooltip，不像vue-intro那样有高亮显示

如何使用vue-tour

//首先npm下载vue-tour
npm install vue-tour

//然后在main.js中全局引入
import VueTour from 'vue-tour'

require('vue-tour/dist/vue-tour.css')

Vue.use(VueTour)

new Vue({
   
  render: h => h(App)
}).$mount('#app')

//在vue页面中使用vue-tour
<el-input id="v-step-11"  v-model="form" autocomplete="off"  class="form-input"></el-input>
<el-input id="v-step-12" v-model=