Vue custom instruction realizes automatic click event

Vue realizes the automatic click event, and the click event occurs just after entering the page.

The vue used here can be moved to the vue document. Custom instruction directive, specific use

1. If there is no v-for loop, put the directive custom instruction directly.

<template>
 
<div class="clickdown" @click="myClick()" v-clickDown>自动点击</div>
 
</template>
 
export default {
 
 directives: {
            clickDown: {
                inserted(el) {
                        el.click()
                }
            }
        }
 
}

2. If there is a v-for loop, you need to automatically click on the first index, then you need 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()
                    }
                }
            }
        }
 
}

Guess you like

Origin blog.csdn.net/w199809w/article/details/126299814