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…

目录
相关文章
|
3月前
|
JavaScript 前端开发 安全
【技术革新】Vue.js + TypeScript:如何让前端开发既高效又安心?
【8月更文挑战第30天】在使用Vue.js构建前端应用时,结合TypeScript能显著提升代码质量和开发效率。TypeScript作为JavaScript的超集,通过添加静态类型检查帮助早期发现错误,减少运行时问题。本文通过具体案例展示如何在Vue.js项目中集成TypeScript,并利用其类型系统提升代码质量。首先,使用Vue CLI创建支持TypeScript的新项目,然后构建一个简单的待办事项应用,通过定义接口描述数据结构并在组件中使用类型注解,确保代码符合预期并提供更好的编辑器支持。
79 0
|
3月前
|
JavaScript 前端开发 安全
立等可取的 Vue + Typescript 函数式组件实战
立等可取的 Vue + Typescript 函数式组件实战
|
4月前
|
JavaScript 前端开发
【Vue3+TypeScript】CRM系统项目搭建之 — 关于如何设计出优质的 Vue 业务组件
【Vue3+TypeScript】CRM系统项目搭建之 — 关于如何设计出优质的 Vue 业务组件
46 0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于如何设计出优质的 Vue 业务组件
|
5月前
|
JavaScript 安全 前端开发
Vue 3 中的 TypeScript
【6月更文挑战第15天】
79 6
|
6月前
|
JavaScript
【第12期】Vue3+TypeScript+Vite中动态引入图片等静态资源
【第12期】Vue3+TypeScript+Vite中动态引入图片等静态资源 c
1181 0
|
6月前
|
JavaScript 前端开发 开发者
类型检查:结合TypeScript和Vue进行开发
【4月更文挑战第24天】TypeScript是JavaScript超集,提供类型注解等特性,提升代码质量和可维护性。Vue.js是一款高效前端框架,两者结合优化开发体验。本文指导如何配置和使用TypeScript与Vue:安装TypeScript和Vue CLI,创建Vue项目时选择TypeScript支持,配置`tsconfig.json`,编写`.tsx`组件,最后运行和构建项目。这种结合有助于错误检查和提升开发效率。
55 2
|
6月前
|
JavaScript 前端开发 开发者
Vue工具和生态系统: Vue.js和TypeScript可以一起使用吗?
【4月更文挑战第18天】Vue.js与TypeScript兼容,官方文档支持在Vue项目中集成TypeScript。TypeScript作为JavaScript超集,提供静态类型检查和面向对象编程,增强代码准确性和健壮性。使用TypeScript能提前发现潜在错误,提升代码可读性,支持接口和泛型,使数据结构和函数更灵活。然而,不是所有Vue插件都兼容TypeScript,可能需额外配置。推荐尝试在Vue项目中使用TypeScript以提升项目质量。
109 0
|
6月前
|
JavaScript 前端开发
在Vue中使用TypeScript的常见问题有哪些?
在Vue中使用TypeScript的常见问题有哪些?
95 2
|
6月前
|
JavaScript 前端开发
在Vue中使用TypeScript的优缺点是什么?
在Vue中使用TypeScript的优缺点是什么?
109 0
|
6月前
|
JavaScript
在 Vue 中如何使用 TypeScript?
在 Vue 中如何使用 TypeScript?
43 0