日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 Vue 正文

Vue如何實現自動觸發功能_vue.js

作者：你丫才美工 ? 更新時間： 2022-04-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()
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
}

好了，完美！

原文鏈接：https://www.cnblogs.com/tw6668/p/9201846.html

欄目分類
最近更新