前端Tippy.js组件 配置 Button点击事件

         先看需求，这是一个日程的模块，在日历的上面，我选择了tippy.js做鼠标移入弹窗

        需求是在弹窗里我需要一个按钮，做详情的一个查看和跳转，当时觉得不就是加一个按钮做跳转，当看完文档后，发现并没有相关的实例，都是只针对tippy的一些配置api

        

        

 tippy.js中所显示的文字都可以自定义以content来显示

Calenddata.value.map(v=>{
      if(id == v.id){
        calendar_state = v.calendar_state
        content = v.content
        start = v.start
        end = v.end
        col = v.color
      }
    })
    tippy(info.el, {
      theme:'custom',//主题选取 自定义
      // content:content,
      content:"<div style='width: 100%;'>" +
        "<div style='font-weight: 600;text-align: center;line-height: 20px;color:"+col+"'>"+calendar_state+"</div>" +
        "<div style='border-bottom: 2px solid;font-weight: 600;text-align: center;line-height: 20px;color:"+col+"'>"+info.event.title+"</div>" +
        "<div style='font-weight: 400;'>开始时间："+start+"</div>" +
        "<div style='font-weight: 400;'>结束时间："+end+"</div>" +
        // "<div style='color: #666666'>成员："+eve.remember+"</div>" +
        "<div style='font-weight: 400;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;-webkit-box-orient: vertical;-webkit-line-clamp: 2;' >日程："+content+"</div>" + "</div>",
      followCursor:'initial',
      interactive: true,
      animation: 'scale',
      allowHTML: true,    //为true的时候，可以识别content中的html
});

这是我配置的弹窗，发现自定义可以写html，那就干脆扔一个按钮上去

content:"<div style='width: 100%;'>" +
        "<div style='font-weight: 600;text-align: center;line-height: 20px;color:"+col+"'>"+calendar_state+"</div>" +
        "<div style='border-bottom: 2px solid;font-weight: 600;text-align: center;line-height: 20px;color:"+col+"'>"+info.event.title+"</div>" +
        "<div style='font-weight: 400;'>开始时间："+start+"</div>" +
        "<div style='font-weight: 400;'>结束时间："+end+"</div>" +
        // "<div style='color: #666666'>成员："+eve.remember+"</div>" +
        "<div style='font-weight: 400;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;-webkit-box-orient: vertical;-webkit-line-clamp: 2;' >日程："+content+"</div>" + 
        "<div style='text-align: center;color:#fff'><button class='btn_click' style='width:35%;height:30px;border:none;border-radius:10px;background:"+col+";'>查看详情</button></div>",

因为我的弹窗是配置在日历的组件中，所以获取dom元素也要在日历的配置项中写

setTimeout(()=>{
   var btn_click = document.querySelector(".btn_click")
   btn_click.onclick = function (){
     router.findComName("prompting")
   }
}, 200)

我这里用了一个setTimeout，主要是弹窗覆盖了我的日历，点击后会穿透弹窗触发日历的点击事件

最后也完成的需求，不知道我的这种方式你们能不能接受