vue+typescript+poper.js使用

1. 首先 安装poper.js
2. npm install poper.js
3. 然后import Poper from poper.js
4. 设置tootip内容（tooltip的样式自己设置）
5. 在mouseenter事件中设置增加poper
6. 在mouseleave事件中设置隐藏poper

 

<template>
  <div>
    <span ref="elems">sssssssssssssss</span>
    <div ref="tooltip" class="rk-tooltip-popper" style="display:none">
      <div class="rk-tooltip-content">
        <div class="rk-tooltip-arrow"></div>
        <div class="rk-tooltip-inner">2222222222</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Option } from "@/types/global";
import { Component, Vue, Prop, Ref } from "vue-property-decorator";
import { State, Action, Mutation } from "vuex-class";
import "./tooltip.scss";
import Popper from "popper.js";
@Component
export default class Trace extends Vue {
  @Ref("elems") elems: any;
  @Ref("tooltip") tooltip: any;
  mounted() {
    this.elems.addEventListener("mouseenter", () => {
        this.tooltip.style.display = "block";
      new Popper(this.elems, this.tooltip, {
        placement: "top"
      });
    });
     this.elems.addEventListener("mouseleave", () => {
        this.tooltip.style.display = "none";
    });
  }
}
</script>
<style lang="scss">
</style>

这是最简单的入门写法，如果要设置指令 建议使用删除和新增元素的写法。

poper.js的用法参考这篇文章