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()
                    }
                }
            }
        }
}

好了，完美！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目watch内的函数重复触发问题的解决

    问题描述: 有两个页面A和B,每个页面里都有一个getList()方法.这个两个方法都需要传一个相同的参数C,参数C的选择过程又比较麻烦.为了避免在切换A.B两个界面重复选择参数C的问题,我将参数C存入vuex中,然后在两个页面里都使用watch监听参数C来执行getList()方法.然后发现一个问题,从A页面进入B页面后,在B页面重新选择参数C,A页面的getList()方法竟然也会被执行,反之亦然,从B页面到A页面后,在A页面改变参数C也会执行B页面的getList()方法. 后来发现是使用

  • vue点击弹窗自动触发点击事件的解决办法(模拟场景)

    vue点击弹窗自动触发点击事件的解决办法(模拟场景)

    业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化. div 指令: // 自动触发点击事件 directives:{ trigger:{ inserted(el,binging){ // console.log("自动触发事件") el.click() } } }, PS:下面看下vue 自动触发点击事件 需要,点击左边的列表出详情,但是都需要点击事件,页面进来时,默认触发点击事件 方法一,vue自定义指令 direc

  • 浅谈vue.watch的触发条件是什么

    很多人习惯用watch,但是却很少有人知道watch的真正触发条件.如果不是对vue原理了如指掌,请谨慎使用watch. 示例1,下面会触发watch 吗? <script> new Vue({ data() { return { city: {id: 1, name: 'Beijing'} } }, watch: { city() { console.log('city changed') } }, created() { this.city = {id: 1, name: 'Beijing

  • 解决vue elementUI 使用el-select 时 change事件的触发问题

    如下所示: <el-select v-model="level" size="mini" placeholder="请选择" :change="selectChange()"> <el-option v-for="item in select" :key="item.value" :label="item.label" :value="it

  • 详解vue中在父组件点击按钮触发子组件的事件

    我把这个实例分为几个步骤解读: 1.父组件的button元素绑定click事件,该事件指向notify方法 2.给子组件注册一个ref="child" 3.父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg  4.子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中 父组件 <template> <div id="app&qu

  • Vue 防止短时间内连续点击后多次触发请求的操作

    如果连续点击提交按钮,可能会重复提交数据,导致出错,解决的方法可以使用disabled限制点击,感觉体验不是太好,所有给大家分享下面的方法 <el-button @click="throttle()">测试</el-button> export default { data(){ return { lastTime:0 //默认上一次点击时间为0 } } } methods:{ throttle(){ //获取当前时间的时间戳 let now = new Dat

  • Vue如何实现自动触发功能

    目录 实现自动触发功能 自定义指令实现自动点击事件 1.若是没有v-for循环 2.若是有v-for循环 实现自动触发功能 今天在项目中遇到一个问题,就是当页面加载的时候,我希望某个元素通过点击事件添加样式,试了下jQuery的trigger方法,并没有任何效果,于是只能手动添加,先把功能实现,晚上回来的时候,闲着没事做便温故Vue知识点,正好听到视频中老师在讲解关于自定义指令directives属性,于是便试了下 <button @click='toggle' v-trigger>toggl

  • vue实现带自动吸附功能的悬浮球

    vue实现带自动吸附功能的悬浮球

    本文实例为大家分享了vue实现带自动吸附功能的悬浮球,供大家参考,具体内容如下 封装的组件代码,可以引到页面直接使用 <template>   <div     ref="floatDrag"     class="float-position"     :style="{ left: left + 'px', top: top + 'px', zIndex: zIndex }"     @touchmove.prevent  

  • vue 输入电话号码自动按3-4-4分割功能的实现代码

    输入框绑定 <input class="inputBox" type="phone" placeholder=" 请输入手机号" maxlength="13" v-model="phoneNum"/> 监听事件,每次号码发生改变时触发 大体的逻辑是:先比较号码变化前后的长度,判断是输入还是删除,如果是输入的话,利用正则表达式改变号码格式. watch: { phoneNum (newValue,

  • Vue Autocomplete 自动完成功能简单示例

    本文实例讲述了Vue Autocomplete 自动完成功能.分享给大家供大家参考,具体如下: 页面 : 用闭包的方式,index表示第几个组件 <el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="((item)=>{handleSelect(item, index)})&qu

  • Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)

    官网的demo献上 在elementui Input输入框中可以找到远程搜索组件,获取服务端的数据 官网中的数据list都是写在loadAll()中的,而如果我们此时要用到mock的数据就要在此基础上对代码进行修改. -mock数据的获取- 我们要获取远程mock中所有学生的学号信息,根据输入的数据来远程查找目标,并且在选中该目标后能够自动填充对应的姓名.生日.手机等信息,实现快速获取信息的功能,再也不用手动一个个去输入所有的数据啦- 在template中添加el-autocomplete <e

  • vscode 配置vue+vetur+eslint+prettier自动格式化功能

    该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和eslint会有冲突,所以没用上. vscode ESlint插件 Eslint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示,后面的自定格式化根据这里的错误提示进行格式化操作. 基于vue-cli创建的项目 以下相关步骤需要注意: 创建的时候把Linter/For

  • 自动在Windows中运行Python脚本并定时触发功能实现

    自动在Windows中运行Python脚本并定时触发功能实现

    目录 环境介绍 运行Python脚本:.bat文件 举例: 定时在Windows中触发.bat文件(英文版系统) 环境介绍 系统环境:Windows 10 Python版本:Python 3.5 必备包:无 运行Python脚本:.bat文件 在Windows中,.bat文件是批处理文件,是与Linux中.sh(shell)文件很像的东西. 如果,我们想在Windows中运行一个Python脚本,我们可以通过CMD,首先进入python文件所在的目录,之后运行. 但是这样很麻烦,每次都要打开CM

  • vue实现加载页面自动触发函数(及异步获取数据)

    vue实现加载页面自动触发函数(及异步获取数据)

    目录 加载页面自动触发函数 实例 页面加载时,触发某个函数的方法 解决方法如下 加载页面自动触发函数 实例 methods:{ onCreate:async function() { const router = useRouter() const route = useRoute() const { id = '', f = 1 } = route.query console.log("======="+id) const res = await reqGetOrderNumByCl

  • vue实现输入框自动跳转功能

    本文实例为大家分享了vue实现输入框自动跳转的具体代码,供大家参考,具体内容如下 <template> <div class="inputClass"> <div v-for="(item,index) in list" :key="index"> <input v-model="item.value" type="password" class="inp

  • 基于chosen插件实现人员选择树搜索自动筛选功能

    基于chosen插件实现人员选择树搜索自动筛选功能

    要实现的功能截图: 要求: 1.点击输入框可以根据拼音自动筛选数据,并且标记已经选择的数据,没有结果的时候提示,相应的更新左边树状态 2.勾选树右侧树的复选框左侧出现相应的内容 我用到的插件 vue+chosen+ztree vue:组件化的MVVM库 chosen:单选列表和多选列表增强 ztree:基于jquery的树插件 分析 chosen插件已经可以实现1中的大部分效果,我们只需要预先获取数据,实现左右两侧一 一对应,最后点击发送获取最终的数据集合ID 具体实现 chosen需要的htm

随机推荐