vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
2023-09-14 09:04:06 时间
官网:
效果图:
简介及使用教程
Vue Tour是轻巧、简单且可自定义的新手指引插件,可与Vue.js一起使用。
它提供了一种快速简便的方法来指导用户使用您的应用程序。
安装
Npm
npm i vue-tour
Yarn
yarn add vue-tour
使用
import Vue from 'vue'
import App from './App.vue'
import VueTour from 'vue-tour'
require('vue-tour/dist/vue-tour.css')
Vue.use(VueTour)
new Vue({
render: h => h(App)
}).$mount('#app')
在应用程序中的任何模板中(通常在App.vue中),放置一个<v-tour>
组件,并传递给它一系列步骤。
每个步骤的目标属性都可以将应用程序的任何组件中的DOM元素作为目标。
<template>
<div>
<div id="v-step-0">A DOM element on your page. The first step will pop on this element because its ID is 'v-step-0'.</div>
<div class="v-step-1">A DOM element on your page. The second step will pop on this element because its ID is 'v-step-1'.</div>
<div data-v-step="2">A DOM element on your page. The third and final step will pop on this element because its ID is 'v-step-2'.</div>
<v-tour name="myTour" :steps="steps"></v-tour>
</div>
</template>
<script>
export default {
name: 'my-tour',
data () {
return {
steps: [
{
target: '#v-step-0', // We're using document.querySelector() under the hood
header: {
title: 'Get Started',
},
content: `Discover <strong>Vue Tour</strong>!`
},
{
target: '.v-step-1',
content: 'An awesome plugin made with Vue.js!'
},
{
target: '[data-v-step="2"]',
content: 'Try it, you\'ll love it!<br>You can put HTML in the steps and completely customize the DOM to suit your needs.',
params: {
placement: 'top' // Any valid Popper.js placement. See https://popper.js.org/popper-documentation.html#Popper.placements
}
}
]
}
},
mounted: function () {
this.$tours['myTour'].start()
}
}
</script>
相关文章
- vue-echarts画深度图
- vue前端怎么导出图片_VUE中将页面导出为图片或者PDF
- Vue笔记(10) vue-router
- html使用vue axios,使用 Vue和axios
- Vue——入门详解+案例
- vue md5.js_VUE.js
- vue项目管理_vue适合做管理系统吗
- 前端vue面试题2021及答案_redux面试题
- 你知道import Vue from 'vue' 吗?
- Vue响应式依赖收集原理分析-vue高级必备
- Vue组件基础(上)
- Vue生成二维码_vue视频软件怎么生成二维码
- vue父组件调用子组件属性_vue子组件获取父组件实例
- Vue和vue全家桶有什么区别_Vue和vue全家桶有什么区别
- Vue项目:菜农管理 【maven + spring boot + RESTFul + SSM+vue + axios】
- IDEA+SSM+SpringBoot+Vue+Element UI实现班级管理增删改查
- 不需要web服务器,如何构建一个可以内部跨域的http服务(Vue+Flask)
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- vue自定义指令实现长按功能
- Vue提示框组件vue-notification使用实例演示
- linux下快速部署Vue项目(linux部署vue)
- Vue.js数据管理神器Vuex搭配MySQL数据库,打造高效实用的Web应用(vuexmysql)
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- Vue技术实现访问远程Redis的精彩之旅(vue访问远端redis)
- 优雅的Vue请求Redis驱动的高性能服务(vue请求redis)
- 从零开始Vue项目中使用Redis(vue使用redis)
- Vue中触发Redis订阅通知(vue中订阅redis)
- Oracle Vue网站助力网站创新,让你的网站飞起来(oracle vue网站)