<template><div><button ref="myButton" @click="handleClick">按钮</button></div>
</template><script>
export default {methods: {handleClick() {const button = this.$refs.myButton;// 创建一个鼠标点击事件const event = new MouseEvent('click', {view: window,bubbles: true,cancelable: true});// 触发鼠标点击事件button.dispatchEvent(event);}}
}
</script>
在这个示例中,我们有一个按钮,并绑定了一个点击事件处理函数 handleClick
。在 handleClick
方法中,我们首先获取按钮元素的引用。然后,使用 new MouseEvent
创建一个新的鼠标点击事件,可以设置一些相关的属性。最后,通过调用 dispatchEvent
方法并传递创建的事件对象,来触发真实的鼠标点击事件。
请注意,通过 dispatchEvent
方法触发的鼠标点击事件是真实的,它会触发与用户实际点击按钮时相同的行为和效果。