精选文章 Fullcalendar 在vue中鼠标hover显示悬浮框(tippy.js插件)

Fullcalendar 在vue中鼠标hover显示悬浮框(tippy.js插件)

作者:梅子丶黄时雨 时间: 2020-08-04 12:51:21
梅子丶黄时雨 2020-08-04 12:51:21

从开始到放弃,从放弃到开始,哥们我已经折腾两个早上了,都有点怀疑人生了。

首先,安装Fullcalendar插件,这个东西只能看官网,官网:https://fullcalendar.io/docs#toc。因为它更新快,向下也不兼容哦,一般中文文档啥的更不上官网的速度。有一个小妙招,下个有道词典,不认识的指一下就可以翻译了。具体的安装过程就不详细记录了,今天说一下鼠标hover日历事件显示悬浮框这个东东怎么实现。

因为Fullcalendar文档基本是基于jquery的,所以jquery的同学很好弄,但是今天哥用的vue框架。痛就痛苦在这里。

话不多说,记录下配置:

这一句就是初始化日历插件的东西了。配置如下,这是基于Fullcalendar V5版本的哦,其他版本可能不适合:

calendarOptions: {
          plugins: [ dayGridPlugin, interactionPlugin,timeGridPlugin],//加载插件,V5采用插件模块方式加入
          editable: true,//是否可编辑
          droppable: true,//可拖拽的
          initialView: 'dayGridMonth',//日插件
          // initialDate:""//初始化日期
          timeZone: 'local',//采用时区
          locale:"zh-cn",//采用中文
          height:700,//日历高度
          dateClick: this.handleDateClick,//日期方格点击事件
          eventClick:this.handleEventClick,//日程点击事件
          eventMouseEnter:function (info) {//鼠标hover事件,对应也有其他鼠标事件监听
            // console.log(info)
            let col = info.event.borderColor;
            let eve = info.event._def.extendedProps
            tippy(info.el, {//tippy hover插件
              content:"
" + "
"+info.event.title+"
" + "
训练名称:"+eve.trainName+"
" + "
训练日期:"+eve.trainDate+"
" + "
开始时间:"+eve.starttime+"
" + "
结束时间:"+eve.endtime+"
" + "
训练地点:"+eve.address+"
" + // "
参训成员:"+eve.remember+"
" + "
备注:"+eve.remark+"
" + "
",//允许Html配置 theme:'light',//主题选取 // trigger: 'click',//触发类型 interactive: true,//可交互的 placement: 'right-end',//悬浮框位置 allowHTML: true,//是否允许html文本 }); }, titleFormat: { year: 'numeric', month: 'long'},//日期title格式 headerToolbar:{//头部toolbar start: '', center: 'prev title next', end: '' }, dayCellClassNames:"bgTd",//日期方格样式设置 events:[]//日程事件的json }

鼠标hover时间利用的是tippy插件vue版本的哈,官网:https://atomiks.github.io/tippyjs/   也是英文的。

首先运行安装:

# npm
npm i tippy.js

# Yarn
yarn add tippy.js

其次在你要用到的文件里引入:

import tippy from "tippy.js";
import 'tippy.js/dist/tippy.css';

然后在Fullcalendar里的eventMouseEnter里这样写:

eventMouseEnter:function (info) {
            tippy(info.el, {
              content:"ksljd"
              // content: info.event.extendedProps.name,
              // placement: "top-start",
              // arrow: false,
              // 鼠标放在提示中提示不消失
              // interactive: true,
            });
          },

效果如图所示:

Fullcalendar 在vue中鼠标hover显示悬浮框(tippy.js插件)1

 接下来就是配置啦,需要注意的点是配置需要引入相关的css才行,这一点可以参考官网哦。例如:

tippy(info.el, {
    content:"ksljd",
    animation: 'scale',//显示动画
    theme:'light'//显示主题
    });

 则需要引入:

import 'tippy.js/themes/light.css';
import 'tippy.js/animations/scale.css';

如果需要自定义悬浮框的内容,在需要更多配置,下面是我的一种配置效果以及展示:

 

tippy(info.el, {
content:"
" + "
"+info.event.title+"
" + "
训练名称:"+eve.trainName+"
" + "
训练日期:"+eve.trainDate+"
" + "
开始时间:"+eve.starttime+"
" + "
结束时间:"+eve.endtime+"
" + "
训练地点:"+eve.address+"
" + "
参训成员:"+eve.remember+"
" + "
备注:"+eve.remark+"
" + "
", theme:'light', // trigger: 'click', interactive: true, placement: 'right-end', allowHTML: true, });

 效果图,还不错吧!嘻嘻Fullcalendar 在vue中鼠标hover显示悬浮框(tippy.js插件)2

 特此记录用到过的两个方法:

this.$refs.fullCalendar.getApi().today();//回到今天
this.$refs.fullCalendar.getApi().gotoDate(val);//去到某天

效果图,基本功能都实现了哦:

 Fullcalendar 在vue中鼠标hover显示悬浮框(tippy.js插件)3

总结:首先就是必须确定tippy安装成功,最好是最新版本,其次就是需要确定引入文件有效,然后就是保证插件运行正常,然就就可以任意配置啦。 tippy是一款可以高度自定义配置的插件,可以好好研究,本文意在搞出这个效果,抛砖迎玉。如有小白有问题的话可以问问小编哦,愿这世界少点坑,多点分享。

相关文章

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:Mac多线程下载Neat Download Manager 1.2.10最新版

下一篇:前端process-definition框架

您可能感兴趣

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。