vue小记——小组件(1)

news2024/11/18 11:40:40

代码: 

<template>
  <div>
    <el-steps :active="active" finish-status="success" simple>
      <el-step title="数据导入"
        ><i class="fa fa-cloud-upload fa-icon-custom" slot="icon"></i>
      </el-step>
      <el-step title="选择数据区"
        ><i class="fa fa-mouse-pointer fa-icon-custom" slot="icon"></i
      ></el-step>
      <el-step title="污染分析"
        ><i class="fa fa-cogs fa-icon-custom" slot="icon"></i
      ></el-step>
      <el-step title="结果保存"
        ><i
          class="fa fa-floppy-o fa-icon-custom"
          aria-hidden="true"
          slot="icon"
        ></i
      ></el-step>
      <el-step title="结果查询"
        ><i class="fa fa-folder-open fa-icon-custom" slot="icon"></i
      ></el-step>
    </el-steps>
    
    <el-button :disabled="active==1" style="margin-top: 12px" @click="pre"
      >上一步</el-button
    >
    <el-button :disabled="active==4" style="margin-top: 12px" @click="next"
      >下一步</el-button
    >
    <div v-show="active == 1">
   
    </div>
  </div>
</template>

<script>
export default {
  name: "1",
  data() {
    return {
      //默认第一步
      active: 0,
    };
  },
  methods: {
    // 步骤条下一步的方法
    next() {
      this.active++;
    },
    // 步骤条上一步的方法
    pre() {
       this.active--;
    },
  },

  components: {},
};
</script>

<style land="less">
.el-step.is-simple .el-step__icon-inner.is-status {
  font-size: 17px;
}
.fa-icon-custom {
  font-size: 17px; 
}
.el-step.is-simple .el-step__icon {
  background: 0 0;
  width: 24px;
  height: 24px;
  font-size: 12px;
}
</style>

效果: 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1683828.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Docker搭建mysql性能测试环境

OpenEuler使用Docker搭建mysql性能测试环境 一、安装Docker二、docker安装mysql三、测试mysql连接 一、安装Docker 建立源文件vim /etc/yum.repos.d/docker-ce.repo增加内容[docker-ce-stable] nameDocker CE Stable - $basearch baseurlhttps://repo.huaweicloud.com/docker…

【手势识别-UIPinchGestureRecognizer捏合-UIPanGestureRecognizer缩放 Objective-C语言】

一、接下来,我们来说这个捏合,和,这个缩放啊 1.捏合, 首先呢,步骤,也都是一样的啊, 1)创建手势对象 2)添加手势 3)实现手势方法 pinch:捏合 UIPinchGestureRecognizer *pinch = [[UIPinchGestureRecognizer alloc] initWithTarget:(id) action:(SEL)]; U…

ThreadLocal原理及使用

一、引言 在Java多线程编程中&#xff0c;ThreadLocal是一个非常有用的工具&#xff0c;它提供了一种将对象与线程关联起来的机制&#xff0c;使得每个线程都可以拥有自己独立的对象副本&#xff0c;从而避免了线程安全问题。然而&#xff0c;使用不当会导致内存泄漏问题。 二…

spring-boot整合Micrometer+Prometheus

环境&#xff1a; micrometer 1.8.2 prometheus 0.14.1 spring-boot-actuator 2.6.6 使用案例 <!-- Springboot启动actuator&#xff0c;默认会引入依赖&#xff1a;micrometer-core --> <dependency><groupId>org.springframework.boot</groupId>&l…

ctfhub中的SSRF相关例题(中)

目录 上传文件 gopher协议的工作原理&#xff1a; gopher协议的使用方法&#xff1a; 相关例题: FastCGI协议 FastCGI协议知识点 相关例题&#xff1a; Redis协议 知识点&#xff1a; 相关例题 第一种方法 第二种方法 上传文件 gopher协议的工作原理&#xff1a; …

《ESP8266通信指南》番外-(附完整代码)ESP8266获取DHT11接入(基于Lua)

前言 此篇为番外篇,是 ESP8266 入门的其他功能教程,包括但不限于 DHT11 驱动TCP 通信Thingsboard 平台的接入阿里云物联网云平台接入华为云平台接入 1. 小节目标 使用 Lua 驱动 DHT11 传感器,获取温湿度的值 2. 进入主题 NodeMCU 基于 LUA 相关资料 官方文档&#xff1a;…

商品指数创年内新高,粘性通胀成为美联储噩梦

文章概述 虽然美国4月CPI增幅放缓让美联储今年降息的可能性大增&#xff0c;但与此同时&#xff0c;大宗商品价格却达到了一年来的最高水平&#xff0c;粘性通胀可能成为美联储的噩梦。数据显示&#xff0c;跟踪24种能源、金属和农业合约彭博大宗商品现货指数今年以来已经上涨…

Mysql超详细安装配置教程(保姆级图文)

MySQL是一种流行的开源关系型数据库管理系统&#xff0c;它广泛用于网站和服务的数据存储和管理。MySQL以其高性能、可靠性和易用性而闻名&#xff0c;是许多Web应用程序的首选数据库解决方案之一。 一、下载安装包 &#xff08;1&#xff09;从网盘下载安装文件 点击此处直…

RK3588 Android13 TvSetting 中增加字体样式切换功能

前言 电视产品,客户需求又升级了,有了切换字体大小还不行,还得增加动态切换字体样式功能, 同样需要在设备偏好设置子菜单里的显示和声音二级菜单里增加字体样式菜单功能,开整。 效果图 framework 部分修改文件清单 frameworks/base/data/fonts/fonts.mk frameworks/bas…

附代码:策略常用-正余弦优化算法

正余弦优化算法作为群智能优化算法的一种, 正弦余弦算法 (sine cosine algorithm, SCA) 是 2016 年由 Mirjalili 提出的一种新型仿自然优化算法, 通过创建多个随机候选解, 利用正余弦函数的数学性质来平衡算法在搜系过程中的全局探索和局部开发能力。该算法具有结构简单、参数少…

MobaXterm:Network error: Connection refused

问题描述 使用MobaXterm连接服务器或者虚拟机里面的操作系统显示“Network error: Connection refused” 因为服务器或者虚拟机里面的操作系统没安装 ssh 解决方法 安装ssh sudo apt-get update sudo apt-get upgrade sudo apt-get install ssh重启 ssh service ssh resta…

Docker 镜像是什么?

Docker 镜像是什么&#xff1f; Docker 镜像&#xff08;Docker Image&#xff09;是用于创建 Docker 容器的只读模板。它包含了运行应用程序所需的所有内容&#xff0c;包括代码、运行时环境、库、环境变量以及配置文件。Docker 镜像是构建和分发应用程序的基础。 在深入阅读…

[数据集][目标检测]弹簧上料检测数据集VOC+YOLO格式142张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;142 标注数量(xml文件个数)&#xff1a;142 标注数量(txt文件个数)&#xff1a;142 标注类别…

如何保护好源代码

在信息技术飞速发展的今天&#xff0c;源代码作为软件开发的核心要素&#xff0c;其安全性与保密性至关重要。一旦源代码泄露或被恶意篡改&#xff0c;将可能导致企业面临重大损失&#xff0c;甚至威胁到整个行业的安全。因此&#xff0c;如何保护源代码已成为软件企业和个人开…

15.1使用curl命令,命令行模拟登陆discuz

使用curl命令,命令行模拟登陆discuz web保存session&#xff0c;鼠标点一点&#xff0c;发起http请求&#xff0c;html 注意不能使用登录带验证码的网站测试 1.curl命令模拟访问discuz论坛 在192.168.111.16服务器的web站点新建一个目录&#xff0c;获取cookie信息与html文件…

IP学习——ospf1

OSPF:开放式最短路径优先协议 无类别IGP协议&#xff1a;链路状态型。基于 LSA收敛&#xff0c;故更新量较大&#xff0c;为在中大型网络正常工作&#xff0c;需要进行结构化的部署---区域划分、ip地址规划 支持等开销负载均衡 组播更新 ---224.0.0.5 224.0.0.6 …

一剪梅-答赠云安客刘自果

当众网友看了笔者“边吸氧边动鼠标”的短视频之后&#xff0c;纷纷发来微信问候。其中我的远房亲戚&#xff0c;那个正在潜心写作数十万字的长篇纪实文学《川江向东流》的66岁贤弟刘自果&#xff08;号云安客&#xff0c;亦称自果居士&#xff09;&#xff0c;发来微信鼓励我&a…

mysql 多表关联查询性能优化-同一sql不同的执行计划

一、问题背景 相同的sql&#xff0c;不同的日期&#xff0c;执行的时间差异很大&#xff0c;执行计划不一样。执行快时&#xff0c;30ms左右。执行慢时&#xff0c;15s左右。 二、分析结论 1、经过分析&#xff0c;发现不同日期下&#xff0c;sql的执行计划不同&#xff0c;驱…

《Effective Objective-C 2.0》读书笔记——熟悉Objective-C

目录 第一章&#xff1a;熟悉Objective-C第1条&#xff1a;了解Objective-C语言的起源第2条&#xff1a;在类的头文件中尽量少引入其他头文件第3条&#xff1a;多用字面量语法&#xff0c;少用与之等价的方法第4条&#xff1a;多用类型常量&#xff0c;少用#define预处理指令第…

网络世界的盗梦空间:用Crawley框架破解数据维度

嗨&#xff0c;我是阿佑&#xff0c;你是否设想过自己能够像电影中的盗梦者一样&#xff0c;潜入网站深层&#xff0c;巧妙抓取那些隐藏在数字幻境中的数据宝藏&#xff1f;今天阿佑将带你体验前所未有的数据探险&#xff0c;让你在Python的海洋中乘风破浪&#xff0c;成为数据…