Vue如何实现自动触发功能
时间：2023-03-15 09:25:06|栏目：vue|点击： 次
实现自动触发功能
今天在项目中遇到一个问题，就是当页面加载的时候，我希望某个元素通过点击事件添加样式，试了下jQuery的trigger方法，并没有任何效果，于是只能手动添加，先把功能实现，晚上回来的时候，闲着没事做便温故Vue知识点，正好听到视频中老师在讲解关于自定义指令directives属性，于是便试了下
<button @click='toggle' v-trigger>toggle</button>
directives:{
trigger:{
inserted(el,binging){
el.click()
//$(el).trigger('click')
}
}
}
页面加载的时候，点击事件被执行了！
自定义指令实现自动点击事件
vue实现自动点击事件，刚进入页面即发生点击事件。
这里用的是vue的自定义指令directive，具体使用可移步到vue文档。
1.若是没有v-for循环
则直接放入directive自定义指令。
<template>
<div class="clickdown" @click="myClick()" v-clickDown>自动点击</div>
</template>
export default {
directives: {
clickDown: {
inserted(el) {
el.click()
}
}
}
}
2.若是有v-for循环
需要自动点击索引第一个，则需要binding。
<template>
<div class="clickdown" @click="myClick()" v-for="(item,index) in list" :key="index" v-clickDown="index">自动点击索引第一个</div>
</template>
export default {
directives: {
clickDown: {
inserted(el,binding,index) {
if(binding.value===0){
el.click()
}
}
}
}
}
好了，完美！
上一篇：关于vant折叠面板默认展开问题
栏 目：vue
下一篇：没有了
本文标题：Vue如何实现自动触发功能
本文地址：http://www.codeinn.net/misctech/227492.html
