element时间抽el-timeline触发点击事件的方法

2023-11-06

直接在element的时间轴组件el-timeline-item上挂在点击事件是不生效的,只有点击在连接线的位置才能触发,这是因为在点击过程中,可能点击到的是el-timeline-item的子元素,比如el-timeline-item__timestamp is-bottom"></div>元素

解决方法:在click上面加上修饰符.native

         <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :timestamp="activity.timestamp"
              @click.native="handleChangeVideo(activity)"
            >
              <div>{{ activity.content }}</div>
            </el-timeline-item>
          </el-timeline>

官方对.native修饰符的解释为:

  有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。例如:

1

<my-component v-on:click.native="doTheThing"></my-component>

记录一下自己的傻缺操作,明明一句话就能搞定,费了老鼻子劲,哈哈^_^

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

element时间抽el-timeline触发点击事件的方法 的相关文章

  • spring-session整合redis原理 排查失效原因

    根据网上配置了一个springsession整合redis作为session后 发现session获取失败 redis里面是有值 登录模块设置进去也能获取的到 但是其他的服务就获取不到 记录一下 跟着源码探寻为何失败 auth服务的配置 引
  • C++开发过程笔记~~持续更新~~

    文章目录 1 为什么只有 析构函数不论基类和派生类都用到了virtual关键字 2 c inline使函数实现可以在头文件中 避免多重定义错误 3 this gt 4 调用另一个cpp文件中函数 多个 cpp文件编译 5 有空看看开源项目g
  • Java 读取AD域用户,解决只能最大查询到1000(MaxPageSize)记录数问题

    Java使用LdapContext查询AD域用户 发现只能查询到1000个 不同系统这个数值可能不同 现象就是最多只能查到固定数量 查询资料发现这是受AD域设置的MaxPageSize参数影响 解决办法有两种 方式一 直接扩大AD域的Max
  • 当前端的一次操作会调用多个有关联的后台接口

    由于历史原因 前端的一次操作需要调用多个后台接口 以前写的一般都是调用一个的 或者哪怕是多个 接口之间也不会有依赖 但最近做的需求里 前端一次操作需要调用两个后台接口 且这两个接口是有关联的 需要先调用接口A 再调用接口B 一开始直接写两个
  • Feign远程调用丢失请求头问题

    在业务中 需要使用A B两个模块 这些模块使用了SpringSession共享Session数据 在B模块中的业务需要用户登录后才能操作 当A调用B的业务时 在B模块中获取不到用户的Session信息 导致B模块判定该请求用户没有登录导致A
  • flex弹性布局;justify-content:space-between;最后一行左对齐

    第一种方式 需要在父级元素使用一个伪类 设置flex 1 使伪类自动填充剩余的空间 这种方式会使最后一行的边距失效 after content flex 1 第二种方式 使用margin right计算 这种方式适合每一行固定列数的情况 假
  • 踩坑:Python找不到指定路径的文件 最全解决方法

    数据集为ucr时间序列数据集 其中 Adiac文件夹中的文件可以通过下面的代码打开 其他文件格式与Adiac相同 且在同一个目录文件下 跑其他的文件 会出现某某文件不存在的问题 网上找了各种解决方法都尝试了 依然还是会报文件找不到错误 最后
  • Vscode python配置了numpy包之后无法调用

    如果之前已经在vscode中配置好了numpy等其他库并且运行成功了 突然换了一个文件打开 如果发现找不到numpy库 很大可能是vscode将你的python解释器给更换了 如上所示 除了自己安装的python解释器之外 还有内置的和其他
  • 记Tomcat删除war包问题

    由于不清楚tomcat部署原理 误认为tomcat部署完成之后 可以把war删除 然后以后每次部署 只需要增量部署就行了 然后还怕由于war包的存在 增量部署的内容会被覆盖掉 不清楚war包什么时候会自动重新部署 于是 rm rf mm w
  • vcpkg: bootstrap-vcpkg.bat下载失败问题

    目录 问题描述 解决方案 大概更好的解决方案 问题描述 将vcpkg项目下载到本地以后运行bootstrap vcpkg bat以后显示下载失败 PS D ProgramData vcpkg gt bootstrap vcpkg bat D
  • Xcode error: Cannot link directly with dylib/framework, your binary is not an allowed client of /

    文章目录 编译报错 Trust App 编译报错 Mac 机子 数据线连接 iPhone13 通过 Appium 里的 appium webdriveragent WebDriverAgent xcodeproj 工程 来编译可以在 iPh
  • unity踩坑记录

    1 Unity ScriptableObject生成的asset文件 关闭unity时数据丢失 需要先setdirty EditorUtility SetDirty obj AssetDatabase SaveAssets 同时 保证Scr
  • element时间抽el-timeline触发点击事件的方法

    直接在element的时间轴组件el timeline item上挂在点击事件是不生效的 只有点击在连接线的位置才能触发 这是因为在点击过程中 可能点击到的是el timeline item的子元素 比如el timeline item t
  • Android 使用 Jenkins 实现自动化打包【流程】&【踩坑】

    引言 每个Android开发应该都有经历过正在码代码的时候突然被打断要求打个啥啥环境啥啥配置的安装包 然后就得暂存代码 切换分支 更改配置 等待build balabala 往大了说就是浪费时间消耗员工价值对公司的不负责 胡扯 往小了说就是
  • 将SSE指令转换为ARM NEON指令

    相关资料 sse指令集 sse指令解释 sse2neon仓库 可以在sse2neon h中寻找对应的neon指令转换方法 注意事项 将sse指令转换为arm neon指令往往很难起到优化作用 甚至可能产生负优化 因此该部分优化仅供参考 mm
  • Win10和Jetson Nano环境下安装Mediapipe-python

    最近因学习需要用到google的mediapipe包进行手部识别 效果不错便想将其移植到jetson nano的ubuntu系统上 坑不少 在这里记录一下过程 步骤 一 Windows10的安装方法 二 Jetson Nano下的安装方法
  • 【Dexie.js 踩坑】Failed to execute ‘transaction‘ on ‘IDBDatabase‘

    查了很多资料 显示都是 indexedDB 的报错 说是异步操作无法保证下一次操作时上一步已经完成 试了很多按顺序执行的方法都无效 再后来试着解决控制台显示的警告提示我版本控制有问题 我就把版本升级了 问题迎刃而解 Dexie 官方文档是英
  • [坑]拦截器返回response.getWrite().println方法返回数据不全

    在SpringBoot项目中 前端ajax请求后端 拦截器进行登录拦截判断 如果超时返回false 则给前端返回一段json字符串 private static void returnJson HttpServletResponse res
  • 解决使用SpringBoot上传文件大小受限问题

    今天在做项目学习的过程中 需要用到文件上传 启动项目正常 访问上传post请求突然报出了一个异常 特此记录一下 1 控制台异常 org springframework web multipart MaxUploadSizeExceededE
  • 解决mac端TypeError: transpileDependencies.map is not a function

    运行环境 问题详情 解决方案 在我使用yarn安装包的时候是正常安装的 可是在yarn serve的时候提示了如下错误 这个时候需要在vue config js中加入这个配置 transpileDependencies 与devServic

随机推荐

  • 数据倾斜2

    数据倾斜的原因和解决方案 MapReduce简介 MapReduce是面向大数据并行处理的计算模型 框架和平台 它隐含了以下三层含义 1 MapReduce是一个基于集群的高性能并行计算平台 Cluster Infrastructure 它
  • 文件上传到Linux服务器常用方法

    本文介绍几种常见的方法 把文件上传到Linux服务器中 常见有使用 scp命令 xshell软件里的xftp程序 U盘挂载 服务器自带的lrzsz程序 一 scp使用说明 1 把本机的文件传给目的服务器 linux linux scp ge
  • 修改Windows的git bash的主题(样式)

    背景 Windows的git bash页面默认是黑白的 如何改成别的颜色 PS 我一直不太喜欢黑色主题的软件 有几个原因 大多软件是白色的 看久了黑色切换到其他软件的时候眼睛不适应 字体等对比不强 我真的不知道为啥这么多人喜欢IDEA黑色主
  • 数组类型方法

    数组类型方法 1 concat 创建一个新数组 将array与任何数组 或 值连接在一起 let arr 1 2 3 4 let arr2 9 let arr3 arr concat arr2 console log arr3 1 2 3
  • jQuery操作类样式(增加、移除、判断)

    一 增加和移除一个或多个类样式的方法 1 增加一个类样式的方法 1 当前需要增加样式的元素 addClass cls 注意在addClass方法中类样式的名字前面没有点 2 增加多个类样式的方法 1 第一种写法 当前需要增加样式的元素 ad
  • 最新Landsat数据下载教程

    目前 国内下载Landsat数据可以通过USGS网站或者地理空间数据云下载 由于USGS对Landsat数据进行了修改 地理空间数据云目前只存储有2017年5月之前的数据 本文只介绍从USGS网站下载Landsat数据 USGS有两个网站可
  • mysql: using the Connector/J connection property ‘autoReconnect=true‘ to avoid this problem

    报错信息 com mysql cj jdbc exceptions CommunicationsException The last packet successfully received from the server was 1 12
  • 怎么使用Web Workers提升性能?

    一 概述 Web Workers 使得一个Web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作 这样做的好处是可以在一个单独的线程中执行费时的处理任务 从而允许主 通常是UI 线程运行而不被阻塞 它的作用就是给JS创造多线程运行
  • samba linux命令,Linux下的samba命令技巧

    昨天想DX学习了的Linux命令 当我想独占服务器上的A文件上 发现已经有用户正在使用 可以打下如下命令 smbstatus grep DEF M 显示如下 albert koidemrp smbstatus grep DEF M PID
  • centos使用sh脚本启动jar包

    centos使用sh脚本启动jar包 1 可以在windows上编辑好 上传至服务器 也可以在centos中直接新建文件 文件以 sh命名 例如 demo sh abc sh bin bash name jar包启动脚本 jar包所在位置
  • 【C++】—— 多态

    目录 一 多态的概念 二 多态的定义及实现 1 多态的构成条件 2 虚函数 3 虚函数的重写 4 虚函数重写的两个例外 1 协变 2 析构函数的重写 5 C 11 override和final 6 重载 覆盖 重写 隐藏 重定义 的对比 三
  • 开箱即用IO流实现文件分块合并

    文章目录 一 文件分块 二 文件合并 断点上传文件的前置知识 用io流实现文件分块与合并 一 文件分块 文件分块 param sourceFile 源文件 param targetDir 分块文件存放目录 public static voi
  • python画圣诞树代码-python圣诞树代码

    python圣诞树代码 1 简单的绘制圣诞树 新建tree1 py或者直接输入下面代码运行 声明树的高度 height 5 树的雪花数 初始为1 stars 1 以数的高度作为循环次数 for i in range height print
  • 别再自己抠图了,Python用5行代码实现批量抠图

    前言 对于会PhotoShop的人来说 抠图是非常简单的操作了 有时候几秒钟就能扣好一张图 不过一些比较复杂的图 有时候还是要画点时间的 今天就给大家带了一个非常快速简单的办法 用Python来批量抠取人像 效果展示 开始吧 我也不看好什么
  • 电感boost计算

    计算IL方式一 上例中已知最大负载电流为Iout 2A 也可以使用能量守恒来计算输入电流 即IL 比如我们算boost转换效率为 90 可以列出式子 Vin Iin Vout Iout 可以知道 Iin 4 0 9 A 方式二 上面这种计算
  • 7-6 素因子分解(20 分)

    7 6 素因子分解 20 分 给定某个正整数 N 求其素因子分解结果 即给出其因式分解表达式 N p 1 k 1 p 2 k 2 p m k m 输入格式 输入long int范围内的正整数 N 输出格式 按给定格式输出N的素因式分解表达式
  • Point-GNN README批注

    Point GNN README批注 Point GNN 1 Getting Started 1 1 Prerequisites 1 2 KITTI Dataset 1 3 Download Point GNN 2 Inference 2
  • 腾讯开源了一款 Markdown 编辑器,易扩展、功能全,很好用!

    介绍 Cherry Markdown Editor 是一款 Javascript Markdown 编辑器 具有开箱即用 轻量简洁 易于扩展等特点 它可以运行在浏览器或服务端 NodeJs 开箱即用 开发者可以使用非常简单的方式调用并实例化
  • 【实用数学手册(第2版)扫描版.pdf】和【免安装Matlab.7.0.绿色破解U盘便携移...】 百度网盘下载地址

    实用数学手册 第2版 扫描版 pdf http pan baidu com s 1ntLVAf3 免安装Matlab 7 0 绿色破解U盘便携移动版 MATLABr2007b portable exe http pan baidu com
  • element时间抽el-timeline触发点击事件的方法

    直接在element的时间轴组件el timeline item上挂在点击事件是不生效的 只有点击在连接线的位置才能触发 这是因为在点击过程中 可能点击到的是el timeline item的子元素 比如el timeline item t