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

发布时间 2023-04-10 20:32:40作者: 又一岁荣枯

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

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)
});