简单来说,只添加click 和css :hover就好了

一、组件里

<el-steps :space="200" :active="1" finish-status="success">
<el-step @click.native="on_click(1)" title="已完成"></el-step>
<el-step @click.native="on_click(2)" title="进行中"></el-step>
<el-step @click.native="on_click(3)" title="步骤 3"></el-step>
</el-steps>

二、方法里

methods: {
on_click(e){
console.log(e);
}
}

三、css里

.el-step__head:hover {
color: #67c23a;
border-color: #67c23a;
}

嗯。就酱~

参考https://jsfiddle.net/1m6kkqgg/

element-UI的操作步骤steps每一项添加事件,比如click,hover的更多相关文章

  1. vue问题三:element ui的upload组件上传图片成功和移除事件

    element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

  2. 在vue中关于element UI 中表格实现下载功能,表头添加按钮,和点击事件失效的解决办法。

    因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...

  3. LoadRunner添加Weblogic监控的注意事项(非单纯的操作步骤)

    LoadRunner添加Weblogic监控的注意事项(非单纯的操作步骤)   关于LR如何监控Weblogic(JMX方式)的操作就不在这里多说了,帮助文件和网上的介绍已经非常多了,关键是对各操作步 ...

  4. (Element UI 组件 Table)去除单元格底部的横线

    Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...

  5. element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)

    来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...

  6. selenium高亮显示操作步骤方法

    package com.allin.pc;import java.util.List;import org.openqa.selenium.WebElement;import org.openqa.s ...

  7. element ui 1.4 升级到 2.0.11

    公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...

  8. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  9. Element UI——本地引入iconfont不显示

    前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...

随机推荐

  1. Problem-1001:Sum Problem

    Sum Problem Sample code : #include <stdio.h> int main() { int i,n; int sum; while(scanf(" ...

  2. 对于一个IE8兼容性问题的反思

    近期做了一个需求,功能非常easy,把用户的优惠券数量读取出来,然后显示到"用户中心"上.开发完毕后.别的浏览器正常.可是到IE8上就不行了.并且,按下F12之后,就又能够载入出来 ...

  3. 一些I2S的基础概念

    在数字音频Datasheet中,我们经常看到256FS,384FS,32kHz,44.1kHz MCLK等概念.一般在数字音频芯片用3个pin作为通讯接口:BCLK,ADCLRC,DOUT.现在做个总 ...

  4. Triangulation by Ear Clipping(耳切法处理多边形三角划分)

    使用EarClipping三角化多边形(翻译) ---Triangulation by Ear Clipping(http://www.geometrictools.com/Documentation ...

  5. FineReport实现java报表多级上报的效果图

    Java报表-上报流程管理 Java报表-上报任务管理 Java报表-我的上报任务 Java报表-系统说明

  6. How tomcat works学习笔记

    最近在看Tomcat的源码, 所以找了一本相关的书籍<How tomcat works>. 博客内容多为 学习该书时所记录的笔记.(如有侵权行为,请联系我:eviltomorrow@163 ...

  7. BitMap、Geo、HyperLogLog

    前言 Reids 在 Web 应用的开发中使用非常广泛,几乎所有的后端技术都会有涉及到 Redis 的使用.Redis 种除了常见的字符串 String.字典 Hash.列表 List.集合 Set. ...

  8. 第一百七十节,jQuery,事件对象,event 对象,默认行为,冒泡

    jQuery,事件对象,event 对象,默认行为,冒泡 学习要点: 1.事件对象 2.冒泡和默认行为 JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器 ...

  9. with root cause 解决办法

    现象:1.工程在启动的时候无异常,当页面加载到包含spring:message标签的页面时,在后台报空指针异常,同时控制               台会显示with root cause提示: 2. ...

  10. Redis 安装成windows服务- 一主二从三哨兵,sentinel安装为Windows服务

    这里只做记录说明 Redis的主从配置网上很多文章,百度一大堆,安装流程应该都可以配置通.我使用的这篇文章 https://blog.csdn.net/u010648555/article/detai ...