vue-tour

vue-tour 介绍

vue Tour是一款轻量级，简单且可定制的用户引导vue.js插件，它提供了一种快速简单的方式来指导您的用户通过您的应用程序。

 

vue-tour特点

轻量级：vue Tour仅由两个vue组件和一个非常小的JavaScript文件组成。简单：在组件中添加一系列步骤，在模板中添加“v-tour”组件，您就可以开始了！定制：您可以单独更改每个步骤的DOM，使用您自己的类甚至添加自定义动画。 安装npm install vue-tour然后在应用程序入口点导入插件（如果使用vue-cli来构建项目，则通常是main.js）并告诉vue使用它。另外不要忘记包括样式。您可以添加默认提供的样式，也可以根据自己的喜好自定义样式。  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')最后v-tour在您的应用程序中的任何位置（通常在App.vue中）将模板中的组件放入其中并向其传递一系列步骤。target每个步骤的属性都可以在应用程序的任何组件中定位DOM元素（只要在弹出相关步骤时它存在于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 hoodcontent: `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'}}]}},mounted: function () {this.$tours['myTour'].start()}}</script>链接: http://www.fly63.com/nav/2202

网站地址:https://pulsardev.github.io/vue-tour

GitHub:https://github.com/pulsardev/vue-tour

网站描述:一款轻量级，简单且可定制的用户引导Vue.js插件

vue-tour

官方网站：https://pulsardev.github.io/vue-tour

小编说

以上是编程之家为你收集整理的vue-tour全部内容。

如果觉得编程之家网站内容还不错，欢迎将编程之家推荐给好友。