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這個主題的樣式會有這種動畫效果 ，使用自定義主題的懸浮框就不會有陰影

自定義懸浮框使用方法：

https://atomiks.github.io/tippyjs/v6/themes/

使用自定義主題之后有個小提示：

在直接使用完之后，會發現小尖尖箭頭的地方依然是默認的主題的顏色，

 

 

這個時候就需要把尖尖箭頭的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>

　　然后箭頭已經改好：

 

 

 

本篇文章引用到的大佬的鏈接有：

1，vue 日歷插件的引入和使用：
https://www.cnblogs.com/bllx/p/9850577.html

2，日歷加懸浮框使用tippyjs插件：

https://blog.csdn.net/Mr_carry/article/details/107783961

3，tippyjs官網文檔：

https://atomiks.github.io/tippyjs/v6/themes/