简单来说,只添加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. 虚拟机下安装CentOS无法上网的解决方式

    我使用VMware虚拟机安装Ubuntu和CentOS,都使用NAT模式连接网络,可是Ubutun能够正常上网,而CentOS不能连接到网络. 原来Centos7默认是不启用有线网卡的.须要手动开启. ...

  2. Parallel小记

    List<Temp> tList = new List<Temp>(); ; i < ; i++) { tList.Add(new Temp() { id = i, na ...

  3. node.js 学习02

    读写文件中的路径问题 readFile()读取文件函数中的./(相对路径)这个参数,相对的是执行node命令的路径,而不是相对于正在执行的这个js文件来查找.为了解决这个问题: __dirname(两 ...

  4. MQTT压力测试之Tsung的使用

    简介 Tsung 是一个压力测试工具,可以测试包括HTTP, WebDAV, PostgreSQL, MySQL, LDAP, and XMPP/Jabber等服务器.针对 HTTP 测试,Tsung ...

  5. zabbix proxy 安装

    ### 前期准备 ```   # 直接yum安装 ```   ### 安装 ``` # 安装 sqlite zabbix-proxy-sqlite3 yum -y install sqlite sql ...

  6. nginx缓存设置

    http://linux008.blog.51cto.com/2837805/547236 目的:缓存nginx服务器的静态文件.如css,js,htm,html,jpg,gif,png,flv,sw ...

  7. 自己动手开发更好用的markdown编辑器-04(实时预览)

    这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/04/25/hexomd-04/   程序打包   文章目录 1. 打开新窗口 ...

  8. atitit.跨语言执行cmd cli api的原理及兼容性设计草案

    atitit.跨语言执行cmd cli api的原理及兼容性设计草案 1. 标准输入,标准输出,标准错误与重新定向1 2. 常见问题2 2.1. 执行bat文件2 2.2. 执行bat文件  /c   ...

  9. 推送本地文件夹到github

    1.首先鼠标右键,Git Init Here将文件夹初始化为仓库 2.打开github桌面版 3.点击添加本地仓库 4.填好summary和description并提交 5.push到自己的githu ...

  10. 常用的Http组件

    日常生活中,我们接触最多的Http组件就是浏览器了!但是,还有其他也很重要的组件,下面容我慢慢盘点: 1.代理服务器 代理服务器就是帮助我们发送请求报文,接受响应报文的服务器.对web服务器而言,代理 ...