简单来说,只添加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. EditPlus设置html和js文件的注释快捷键

    EditPlus默认是可以通过快捷键注释html的,格式是 <!-- </label> <label>类型</label> <label> --& ...

  2. YUYV格式到RGB格式的转换

    为什么YUYV格式要转到RGB格式,视频的显示调用的多数API都是基于RGB格式,所以需要进行格式的转换. YUYV格式如下: Y0U0Y1V0 Y2U1Y3V1.......... 说明:一个Y代表 ...

  3. python-class(4)

    #!/usr/bin/env python #-*- coding:utf-8 -*- ############################ #File Name: class4.py #Auth ...

  4. ROW_NUMBER() OVER (PARTITION BY M ORDER BY N DESC 好用

    做查询的时候,发现一个问题,连接之后,有一个表里面有重复的数据.导致另一个表的记录,跟着重复了几遍.用户曾经反馈,评论会多出来几条, 一直没找到原因.只到发现这个问题.才发现了原因.因为一直用sql ...

  5. 【spring boot】在spring boot下使用多线程

    使用场景: 方法处理到某一步,需要将信息交给另一个线程去处理!! =================================================================== ...

  6. Eureka 2.0 闭源--选择Consul???

    在上个月我们知道 Eureka 2.0 闭源了,但其实对国内的用户影响甚小,一方面国内大都使用的是 Eureka 1.X 系列,另一方面 Spring Cloud 支持很多服务发现的软件,Eureka ...

  7. 第一百九十六节,jQuery EasyUI,Tooltip(提示框)组件

    jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法, ...

  8. 创建一个动作-Action类:

    让我们创建一个Java文件HelloWorldAction.java的Java资源> SRC下一个的包名com.yiibai.struts2与下面的内容. package com.yiibai. ...

  9. python XML实例

    案例:使用XPath的爬虫 现在我们用XPath来做一个简单的爬虫,我们尝试爬取某个贴吧里的所有帖子,并且将该这个帖子里每个楼层发布的图片下载到本地. # tieba_xpath.py #!/usr/ ...

  10. makefile编写---单个子目录编译模板

    经过这次地库项目之后,虽然时间不久,跟团队在一起,虽然队员不一定在技术上有过人之处,但是来自大公司的员工,在工具使用和代码规范方面还是有点可鉴之处,在搭建主控模块是,就得面临makefile编写,因为 ...