zoukankan      html  css  js  c++  java
  • driver

    下载:

    npm install driver.js
    另一种连接引用
    <script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">

    做引导作用的插件

    <template>
      <div class="app-container">
        <aside>
          The guide page is useful for some people who entered the project for the first time. You can briefly introduce the
          features of the project. Demo is based on
          <a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.</a>
        </aside>
        <el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">
          Show Guide
        </el-button>
      </div>
    </template>
    
    <script>
    import Driver from 'driver.js' // import driver.js
    import 'driver.js/dist/driver.min.css' // import driver.js css
    import steps from './steps'
    
    export default {
      name: 'Guide',
      data() {
        return {
          driver: null
        }
      },
      mounted() {
        this.driver = new Driver()
      },
      methods: {
        guide() {
          this.driver.defineSteps(steps)
          this.driver.start()
        }
      }
    }
    </script>

    steps.js

    const steps = [
      {
        element: '#hamburger-container',
        popover: {
          title: 'Hamburger',
          description: 'Open && Close sidebar显示的东西展示页面的内容显示页',
          position: 'bottom'
        }
      },
      {
        element: '#breadcrumb-container',
        popover: {
          title: 'Breadcrumb',
          description: 'Indicate the current page location',
          position: 'bottom'
        }
      },
      {
        element: '#header-search',
        popover: {
          title: 'Page Search',
          description: 'Page search, quick navigation',
          position: 'left'
        }
      },
      {
        element: '#screenfull',
        popover: {
          title: 'Screenfull',
          description: 'Set the page into fullscreen',
          position: 'left'
        }
      },
      {
        element: '#size-select',
        popover: {
          title: 'Switch Size',
          description: 'Switch the system size',
          position: 'left'
        }
      },
      {
        element: '#tags-view-container',
        popover: {
          title: 'Tags view',
          description: 'The history of the page you visited',
          position: 'bottom'
        },
        padding: 0
      }
    ]
    
    export default steps

    一些配置

    new Driver({
        allowClose: false, //禁止点击外部关闭
        doneBtnText: '完成', // 完成按钮标题
        closeBtnText: '关闭', // 关闭按钮标题
        stageBackground: '#fff', // 引导对话的背景色
        nextBtnText: '下一步', // 下一步按钮标题
        prevBtnText: '上一步', // 上一步按钮标题
    })

    export default [
      {
      element: '#demo1',
      popover: {
        title: '演示标题1',
        description: '这是详细描述 ',
        position: 'bottom-center'
        }
      }
    ]

    其他人写的使用说明;

    https://blog.csdn.net/lavendersue/article/details/105838344

  • 相关阅读:
    Jquery揭秘系列:实现$.fn.extend 和$.extend函数
    小谈Jquery框架
    js实现可拖动Div
    WebApp 九宫格抽奖简易demo
    原生js实现autocomplete插件
    扩展RadioButtonListFor和CheckBoxListFor
    关于js的回调函数的一点看法
    原生js实现fadein 和 fadeout
    QlikView sheet权限
    asp.net MVC 文件流导出Excel
  • 原文地址:https://www.cnblogs.com/enhengenhengNymph/p/14537198.html
Copyright © 2011-2022 走看看