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 Vu eto ur from 'vue-tour'require('vue-tour/ dis t/vue-tour.css')Vue.use(Vu eto ur)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 f irs t 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: ` dis cover <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 lov e it!<br>You can put html in the steps and completely customize the DOM to suit your needs.',p ara ms: {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的详细内容...