简单来说,只添加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. 神奇的CAReplicatorLayer

    代码地址如下:http://www.demodashi.com/demo/11702.html 文档描述: The CAReplicatorLayer class creates a specifie ...

  2. AR路由器web界面每IP限速配置方法

    一.做下载方向的限速:在 QOS>接口限速,选择“新建”“接口名称”选择内网接口“限速类型”选择IP限速(目的)“方向”选择流出“起始/目的ip”写内网的ip“类型”选择独占“承诺速率”为限速的 ...

  3. 牛散NO.1:MACD计啜诱多,勾魂枪连环夺命时

    上证日线“连环夺命勾魂枪” 话说MACD中圈C的回勾,好事者皆认为新的冲击波即将曙光再现.伴随着K线出现红柱中阳,更多的投资者将会被这一勾诱惑得群情亢奋,盲断行情又要 起来了.但往往事与愿违,“潘金莲 ...

  4. JQuery最佳实践及常见错误(转自 简书)

    1 使用JQuery的ready处理器 如果你的代码操作DOM,则需要DOM加载完成后再运行代码.推荐使用如下的第一种写法,第二种写法在JQuery3.x中已经不推荐使用了. $(function ( ...

  5. atitit.taskService 任务管理器的设计 v1

    atitit.taskService 任务管理器的设计 v1 任务管理器的点 Sametime_exe_count Per task sleepMillSec Timeout_secs 作者:: 绰号 ...

  6. 字符串函数---strcmp()与strncmp()具体解释及实现

    一.strcmp()与strncmp() strcmp():strcmp(s1,s2);            比較两个字符串.        strncmp():strncmp(s1,s2);   ...

  7. C# AppDomain 类

    /*** AppDomain 表示应用程序域,它是一个应用程序在其中执行的独立环境.无法继承此类. 应用程序域(由 AppDomain 对象表示)为执行托管代码提供隔离.卸载和安全边界. 使用应用程序 ...

  8. c++ virtual 和 pure virtual的区别

    参考资料: http://stackoverflow.com/questions/1306778/c-virtual-pure-virtual-explained 验证代码: #include < ...

  9. C++中两个类相互include的问题

    在构造自己的类时,有可能会碰到两个类之间的相互引用问题,例如:定义了类A类B,A中使用了B定义的类型,B中也使用了A定义的类型 例如: Cup.h #ifndef CUP_H #define CUP_ ...

  10. 配置LANMP环境(2)-- 安装ifconfig命令与安装SecureCRT

    一.安装ifconfig命令 yum whatprovides ifconfig yum install net-tools 安装这个命令就是为了查看虚拟机的ip地址,SecureCRT连接必须要ip ...