Driverjs use in Vue TypeScript Project

简介: Driverjs use in Vue TypeScript Project

driverjsvuetypescriptvuetify

Preview

image.png

Install

npm install driver.js -D

Useage in vue component

<template>
  <div class="text-center headline">
    <div class="ma-8">
      <v-btn @click.prevent.stop="guide">open guide</v-btn>
    </div>
    <div>
      <v-btn id="b1">BUTTON</v-btn>
      <br />
      <br />
      <div class="d1" style="width:200px; border:1px solid red;">DIV</div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
@Component({
  components: {}
})
export default class Introduction extends Vue {
  private driver: any = null
  private mounted() {
    this.driver = new Driver()
    console.info(this.driver)
  }
  private guide() {
    const steps = [
      {
        element: '#b1',
        popover: {
          title: 'Button',
          description: 'This is a Vuetify UI button component',
          position: 'bottom'
        }
      },
      {
        element: '.d1',
        popover: {
          title: 'Div',
          description: 'This is a div element',
          position: 'right'
        }
      }
    ]
    this.driver.defineSteps(steps)
    this.driver.start()
  }
}
</script>

Tips

Event modifier must be used for button click event, otherwise driverjs will not work

<v-btn @click.prevent.stop="guide">open guide</v-btn>
Project address

github.com/gywgithub/v…

相关文章
|
4月前
|
JavaScript
【第12期】Vue3+TypeScript+Vite中动态引入图片等静态资源
【第12期】Vue3+TypeScript+Vite中动态引入图片等静态资源 c
181 0
|
2月前
|
JavaScript 前端开发
在Vue中使用TypeScript的常见问题有哪些?
在Vue中使用TypeScript的常见问题有哪些?
32 2
|
2月前
|
JavaScript 前端开发
在Vue中使用TypeScript的优缺点是什么?
在Vue中使用TypeScript的优缺点是什么?
16 0
|
2月前
|
JavaScript
在 Vue 中如何使用 TypeScript?
在 Vue 中如何使用 TypeScript?
16 0
|
3月前
|
JavaScript 安全 容器
Vue3 + setup + TypeScript: 构建现代、类型安全的Vue应用的关键技巧总结
当使用 setup 的时候,组件直接引入就可以了,不需要再自己手动注册
|
4月前
|
前端开发 JavaScript 测试技术
Vue3+Vite+TypeScript常用项目模块详解(下)
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
|
4月前
|
JavaScript 前端开发 API
Vue3+Vite+TypeScript常用项目模块详解
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
Vue3+Vite+TypeScript常用项目模块详解
|
4月前
|
JavaScript
Vue3 + Typescript + Node.js 搭建elementUI使用环境
Vue3 + Typescript + Node.js 搭建elementUI使用环境
46 0
|
4月前
|
JavaScript 前端开发 开发者
Vue工具和生态系统: Vue.js和TypeScript可以一起使用吗?
Vue工具和生态系统: Vue.js和TypeScript可以一起使用吗?
62 0
|
4月前
|
JavaScript
Vega-Embed 在 Vue Typescript 项目中引入报错
Vega-Embed 在 Vue Typescript 项目中引入报错