vue Fullcalendar鼠标放上展示悬浮框 （tippyjs插件的简单使用）

首先，Fullcalendar的安装使用就不再赘述了，我是在已有这个日历插件的基础上 添加的悬浮框。

本篇注重悬浮框的内容

悬浮框的引入：

直接在package.js中加上tippyjs的信息，然后 npm install。 tippyjs 就已经安装上了

"tippy.js": "6.3.0"

　　在vue文件中进行引入：

import tippy from "tippy.js";    //引入 tippy.js
import 'tippy.js/dist/tippy.css';//引入 tippy.js
import 'tippy.js/themes/light.css';    //引入主题
import 'tippy.js/animations/scale.css';

　　Fullcalendar有 事件：

config: {
                    eventMouseover:this.eventMouseover,//鼠标放上时候的事件
                },

下面是鼠标放上的事件：

/**
           * @param calEvent   里面包含日历中显示的一些数据
           * @param jsEvent    jsEvent.currentTarget 是悬浮在哪个上面的元素
           * @param view
           */
          eventMouseover: function (calEvent, jsEvent, view) {//鼠标在日程区块上时触发
            let content = ""; //content中可以直接设置悬浮框中内容的样式
            content = "<div style=''>" + calEvent.user_name + "</div>";
            content = content + "<div style=''>" + "研发任务：" + calEvent.name1 + "<div>";
            content = content + "<div style=''>" + "快速研发任务：" + calEvent.name2+ "<div>";

            tippy(jsEvent.currentTarget, {
              content: content,  //悬浮框展示的内容
              // theme: 'light',  //悬浮框主题，默认主题中的light主题（白底黑字）
              theme: 'tomato',    //自定义主题，颜色在style中设置
              allowHTML: true,    //为true的时候，可以识别content中的html
            });
          },

　　这样以来，基础的悬浮样式就可以展示：

 

 但是默认的light主题的悬浮框，在多次不停的使用悬浮框的时候 ，会有越来越重的边框阴影，例如：

 

 经过不断的实验，发现只有light这个主题的样式会有这种动画效果 ，使用自定义主题的悬浮框就不会有阴影

 ​

使用自定义主题之后有个小提示：

在直接使用完之后，会发现小尖尖箭头的地方依然是默认的主题的颜色，

 

 

这个时候就需要把尖尖箭头的css进行修改：

<style>
.tippy-box[data-theme~='tomato'] { //自定义主题，这里的tomato是自定义主题的名称
  background-color: tomato; //自定义主题的背景色
  color: yellow;   //自定义主题的字体颜色
}

.tippy-box[data-theme~='tomato'][data-placement^='top'] > .tippy-arrow::before {  //修改箭头的颜色
  border-top-color: tomato;
}

</style>

　　然后箭头已经改好：