简单来说,只添加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. hystrix-turbine实现多服务监控

    原文地址:http://www.cnblogs.com/skyblog/p/5633757.html 1.   概述 Demo地址:http://git.oschina.net/zhou666/spr ...

  2. 开放平台(接口)开发-1-天气API接口大全

     前几天有个公司让准备一下第二次面试.应聘的是IOS开发实习生,可是之前一直做android,IOS刚接触了一个月,会的不是非常多,所以决定做一个实际的项目展现给面试官,余同学给了个建议:能够做一 ...

  3. 记一次elementUI Icon 加载无效的问题。并且提示错误 Failed to decode downloaded font:

    问题在于webpack的loader中.检查了一下发现有两个相同的file-loader的配置,删除其中一个即可.

  4. C++之栈、队列基本用法

    1.C++栈的基本用法: #include<stack> (1)push():向栈内压入一个成员: (2)pop():栈顶弹出一个成员: (3)empty():栈为空返回true,否则返回 ...

  5. php模板原理PHP模板引擎smarty模板原理浅谈

    mvc是开发中的一个伟大的思想,使得开发代码有了更加清晰的层次,让代码分为了三层各施其职.无论是对代码的编写以及后期的阅读和维护,都提供了很大的便利. 我们在php开发中,视图层view是不允许有ph ...

  6. 实现html锚点的两种方式

    1,a标签+name属性. 2,使用标签的id属性:

  7. Nginx编译安装第三方模块http_substitutions_filter_module2222

    Nginx编译安装第三方模块http_substitutions_filter_module Rming -- 阅读 安装 Http 编译 module filter nginx 模块 >> ...

  8. NPOI读取操作excel

    .读取using (FileStream stream = new FileStream(@"c:\客户资料.xls", FileMode.Open, FileAccess.Rea ...

  9. eclipse 断点类别

    行断点 行断点位于一般方法内,双击代码行左边就可以设置行断点: 行断点可以设置条件,右键断点-properties: 1设置效果是第几次到达时暂停,图中所示是当第三次到达时暂停 2是开启条件断点 3是 ...

  10. PHP 几种 序列化/反序列化的方法

    序列化是将变量转换为可保存或传输的字符串的过程:反序列化就是在适当的时候把这个字符串再转化成原来的变量使用.这两个过程结合起来,可以轻松地存储和传输数据,使程序更具维护性. 1. serialize和 ...