admin 管理员组

文章数量: 887007

Vue.js下使用vue

Vue.js下使用vue-full-calendar的那些坑（二）

上次提到在开发日程模块时，本小白用到了vue-full-calendar组件，但是这个组件并没有提供很多原版才有的api，这就需要我们自己去发掘了

下面是vue-full-calendar所提供的鼠标点击事件和渲染函数

//event点击事件
@event-selected="eventClick"
// day的点击事件
@day-click="dayClick"
//渲染函数
@event-render="eventRender"

但是原文档中的event-mouseover和event-mouseout却没有提及和生效
所以我到了fullcalendar.vue里面去找答案
果然，让我找到了

                    eventClick(...args) {self.$emit('event-selected', ...args)},eventDrop(...args) {self.$emit('event-drop', ...args)},eventReceive(...args) {self.$emit('event-receive', ...args)},eventResize(...args) {self.$emit('event-resize', ...args)},dayClick(...args){self.$emit('day-click', ...args)},

作者在改写vue版本的时候，没有把这两个事件添加进去，所以没办法使用（也可能是作者觉得这两个事件在vue版本下没什么用吧hhhh）
但是我们也可以依葫芦画瓢，把我们想要的加上去哈哈哈

                    eventMouseover(...args) {self.$emit('event-mouseover', ...args)},eventMouseout(...args) {self.$emit('event-mouseout', ...args)},

保存后，在组件中尝试使用

//添加鼠标滑过事件@event-mouseover="hoveritem1"@event-mouseout="hoveritem2"
//写函数内容（与dayclick一样，提供了三个参数event, jsEvent, view）
//大家可以输出看看是什么东西hoveritem1(event, jsEvent, view) {console.log(1);},hoveritem2(event, jsEvent, view) {console.log(2);},

初来乍到
多多指教

本文标签： Vuejs下使用vue

版权声明：本文标题：Vue.js下使用vue 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732351349h1533154.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。