代码成就万世基积沙镇海,梦想永在凌云|

又一岁荣枯

园龄:3年4个月粉丝:11关注:6

在vue中为vuecal组件中的一个按钮添加点击事件

现在需要为一个按钮添加点击事件

image

由于vuecal文档中没有该按钮的点击事件,所以考虑使用原生dom为其添加点击事件

使用原生dom添加

使用this.$nextTick+.onclick

this.$nextTick(() => {
	// 获取对应的 dom元素
	var otest = document.getElementsByClassName("vuecal__arrow vuecal__arrow--next");
	console.log(otest)
	otest.onclick = function() {
		console.log("next按钮被点击")
	};

});

经测试,控制台没有信息输出,该方法不可行

使用this.$nextTick+.addEventListener("click"

document.querySelector(".hzy").addEventListener("click", () => {
	console.log("hzy");
});

测试通过,可以在控制台打印

最终代码

// 为日历添加点击事件,需要在页面渲染完后
this.$nextTick(() => {
	// 获取对应的 dom元素
	var otest = document.querySelector("vuecal__arrow vuecal__arrow--next").addEventListener("click", () => {
		console.log("next按钮被点击");
	});
	console.log(otest)
});

本文作者:又一岁荣枯

本文链接:https://www.cnblogs.com/java-six/p/17304198.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   又一岁荣枯  阅读(150)  评论(0编辑  收藏  举报
历史上的今天:
2022-04-10 面向对象七大原则(OOP七大原则)
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起