Vue如何实现自动触发功能

Vue如何实现自动触发功能

目录

实现自动触发功能

自定义指令实现自动点击事件

1.若是没有v-for循环

2.若是有v-for循环

实现自动触发功能

今天在项目中遇到一个问题,就是当页面加载的时候,我希望某个元素通过点击事件添加样式,试了下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()                     }                 }             }         } }

好了,完美!

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。

推荐阅读