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

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

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

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

Calenddata.value.map(v=>{if(id == v.id){calendar_state = v.calendar_statecontent = v.contentstart = v.startend = v.endcol = 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，主要是弹窗覆盖了我的日历，点击后会穿透弹窗触发日历的点击事件

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

前端Tippy.js组件配置 Button点击事件相关推荐

Android按back后执行过程,安卓app测试获取接口返回数据，然后处理数据，放在一个button点击事件里面执行顺序有问题？无法获取数据？...
private JSONArray jsonArray; btn1.setOnClickListener(new View.OnClickListener() { @Override public v ...
button点击事件不响应的解决方法（子视图大小超过父视图）
一开始封装了一个tableView的headerView,感觉完成得还不错,后来测试的时候发现,最下边的两个button的点击事件不响应.然后就...着急了.在网上查询了button点击事件不响应的原 ...
Button点击事件
Button点击事件一般有四种方法: 1:匿名内部类 2: 自定义内部类 3 :通过当前Activity实现点击事件接口 4 :在xml文件中绑定匿名内部类格式 : <Buttonandroi ...
关于js中无法绑定点击事件
在js文件中添加点击事件失败,但是HTML中onclick就能成功. 解决办法:将js的引用的script标签放到</body>的后面.这样在页面渲染之后再执行js代码.
【前端】JS的BOM和DOM，事件，表单验证案例
先看小练习1:开关灯用到的Dom相关知识点 * 功能:控制html文档的内容 * 获取页面标签(元素)对象:Element* document.getElementById("id值&qu ...
js动态添加元素为何点击事件无效
本来觉得不用提的,但是发现最近几个朋友在提,而且新来的小兄弟也有点迷糊这个,所以就简单说说, 看看下面的代码: <!DOCTYPE html> <html><head&g ...
【WPF】代码触发Button点击事件
先定义Button按钮并绑定事件. public void test() {Button btn = new Button();btn.Click += Btn_Click; }private voi ...
android按钮点击toast,关于button点击事件中setOnClick等元素的解读以及方法?以及toast的位置以及作用？...
此文末参考链接: 此段代码的教程以及使用接口的方式.switch语句的教程链接为链接1. 汇总里说的有更多的实现方法,为链接2. 文中链接为视觉统一,链接均于文末,以上为方便文中跳转,加了文中的跳转链 ...
echart折线图信息配置及点击事件
## 图例信息配置 legend: {x:'right', //x轴的位置 left center 55y:'center', //y轴位置 top bottom 55data:['人数'] ,//显 ...
cocos2d-x ListView滚动与Button点击事件
初学cocos2dx开发游戏,在实际开发游戏中遇到一些问题,比如滑动菜单,滑动button不截断ListView的滑动. 下面发表一下个人见解,本人初学,如各位大佬发现错误,请指正用ListView ...

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

前端Tippy.js组件配置 Button点击事件相关推荐

最新文章

热门文章

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

前端Tippy.js组件 配置 Button点击事件相关推荐

最新文章

热门文章

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

前端Tippy.js组件配置 Button点击事件相关推荐