vue小记——小组件(1)

代码: 

<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="结果保存"><iclass="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.mzph.cn/news/839506.shtml

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

相关文章

大语言模型预训练新前沿:「最佳适配打包」重塑文档处理标准

源自&#xff1a;机器之心 "人工智能技术与咨询“ 发布 声明:公众号转载的文章及图片出于非商业性的教育和科研目的供大家参考和探讨&#xff0c;并不意味着支持其观点或证实其内容的真实性。版权归原作者所有&#xff0c;如转载稿涉及版权等问题&#xff0c;请立即联系…

BGP(一)边界网关协议

BGP协议基础 路由分类 直连路由 非直连路由&#xff08;间接路由&#xff09; 静态路由动态路由 IGP&#xff1a;内网网关路由协议&#xff08;在企业内部或数据中心内部使用&#xff09; DV&#xff1a;距离矢量路由协议RIP&#xff08;v1/v2&#xff09;IGRP——网络直径&…

【易生支付官网注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

【会议征稿,IEEE独立出版】第四届计算机技术与信息科学国际研讨会(ISCTIS 2024)

第四届计算机技术与信息科学国际研讨会&#xff08;ISCTIS 2024)将于2024年7月12-14日在中国西安举行。大会将邀请国内外计算机技术与信息科学领域的知名专家学者出席会议&#xff0c;在大会上通过主题演讲、口头报告等方式与学者们分享最新研究成果、交流探讨学术难题。同时&a…

彩信JSON接口对接发送

随着通讯技术的飞速发展&#xff0c;传统的短信已经无法满足人们日益增长的沟通需求。在这样的背景下&#xff0c;群发彩信作为一种更为先进、更为丰富的信息传递方式&#xff0c;逐渐受到了企业和个人的青睐。那么&#xff0c;群发彩信应该怎么对接&#xff0c;又具体有哪些优…

模特百度百科怎么做出来的

百度百科是一个公正、开放、客观的平台&#xff0c;收录了大量的百科词条内容&#xff0c;形成了一定的“权威性”。以下是关于模特百度百科制作的具体步骤和注意事项&#xff1a; 准备阶段 收集资料&#xff1a;为了确保参赛作品的真实性和权威性&#xff0c;需要收集相关信息…

招展工作全面启动!2024深圳国际数字能源展览会

2024深圳国际数字能源展览会 2024 International Digital Energy Expo 时间:2024年9月8-11日 地点:深圳会展中心 指导单位&#xff1a; 国家能源局 深圳市人民政府 中国电力企业联合会 主办单位&#xff1a; 深圳市投资控股有限公司 深圳能源集团股份有限公司 深圳市资…

【Android14 ShellTransitions】(一)开篇

说来惭愧&#xff0c;AndroidU都已经开发这么久了&#xff0c;但是我还没有整理过ShellTransition相关的知识。我本来希望能够系统的写一篇关于ShellTransition的笔记出来&#xff0c;但是发现一来这是一个比较庞大的模块&#xff0c;二来我个人能力有限&#xff0c;对ShellTra…

插件“猫抓”使用方法 - 浏览器下载m3u8视频 - 合并 - 视频检测下载 - 网课下载神器

前言 浏览器下载m3u8视频 - 合并 - 网课下载神器 chrome插件-猫抓 https://chrome.zzzmh.cn/info/jfedfbgedapdagkghmgibemcoggfppbb 步骤&#xff1a; P.s. 推荐大佬的学习视频&#xff01; 《WEB前端大师课》超级棒&#xff01; https://ke.qq.com/course/5892689#term_id…

discuzX2.5的使用心得 札记一

从开始接受php论坛的开发任务&#xff0c;对php感兴趣的我开始迷恋上discuz这个产品了&#xff0c; 像戴志康这样的创新人才&#xff0c;是我们这代人的骄傲和学习的榜样 应该是了解一下&#xff0c;啥事discuzX2.5&#xff0c;百度看一下 discuz x2.5_百度百科 看完百度词条…

C语言 | Leetcode C语言题解之第101题对称二叉树

题目&#xff1a; 题解&#xff1a; /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ bool isSymmetric(struct TreeNode* root) {if (root NULL) return true;//如果根为空直接…

selenium 爬取今日头条

由于今日头条网页是动态渲染&#xff0c;再加上各种token再验证&#xff0c;因此直接通过API接口获取数据难度很大&#xff0c;本文使用selenium来实现新闻内容爬取。 selenium核心代码 知识点&#xff1a; 代码中加了很多的异常处理&#xff0c;保证错误后重试&#xff0c;…

SerDes系列之CTLE均衡技术

CTLE&#xff08;连续时间线性均衡&#xff09;是一种施加在接收器上的线性模拟高通滤波器&#xff0c;通过衰减低频信号分量&#xff0c;以补偿奈奎斯特频率附近的衰减比例&#xff0c;从而实现信道补偿。当低频信号分量向下衰减并推入底噪范围时&#xff0c;CTLE就会失去调节…

C#利用WinForm实现可以查看指定目录文件下所有图片

目录 一、关于Winform 二、创建应用 三、功能实现 四、代码部分 一、关于Winform Windows 窗体是用于生成 Windows 桌面应用的 UI 框架。 它提供了一种基于 Visual Studio 中提供的可视化设计器创建桌面应用的高效方法。 利用视觉对象控件的拖放放置等功能&#xff0c;可…

支付风险智能风控应用与评估指引

伴随宏观经济环境变化、支付监管愈趋从严、金融科技不断创新、支付参与主体日趋多元&#xff0c;支付行业正面临着业务发展与合规经营、支付便捷与安全、数据挖掘与隐私保护等诸多挑战&#xff0c;支付风险的复杂性与日俱增&#xff0c;共同建设安全支付生态的必要性不断凸显&a…

flannel详细介绍

一、前言 Flannel 是一个简单、高效的容器网络解决方案&#xff0c;适用于需要在多个主机上运行容器的场景。它通过虚拟网络技术和 IP 地址管理来实现容器之间的通信和跨主机连接&#xff0c;为容器平台提供了可靠的网络基础设施&#xff0c;flannel有三种模式&#xff0c;分别…

14、24年--信息系统管理——管理方法

主要考选择题,2分左右,案例涉及的概率很低,论文写作不会单独考。 1、管理基础 1.1 层次结构 信息系统是对信息进行采集、处理、存储、管理和检索,形成组织中的信息流动和处理,必要时能向有关人员提供有用的信息的系统。它是由人、技术、流程和数据资源组成的人机系统,目…

【Python】—— 公共的方法

目录 &#xff08;一&#xff09;公共操作 1.1 公共操作之运算符加号 1.2 公共操作之运算符乘号 1.3 公共操作之运算符判断数据是否存在 &#xff08;二&#xff09;公共方法 2.1 公共方法-len 2.2 公共方法-del 2.3 公共方法-max和min 2.4 公共方法-range 2.5 公共方…

Potree点云手册

兄弟们整理和收集资料不容易&#xff0c;请关注手册&#xff01;&#xff01; Potree 以其高显示速度而脱颖而出&#xff0c;使其成为处理大量点云数据集的绝佳选择。 我们的重点将是 Potree 提供的多样化导航和显示选项。 如果你遇到任何问题&#xff0c;请随时尝试其他浏览器…

算法2:滑动窗口(上)

文章目录 长度最小子数组无重复字符的最长子串[最大连续 1 的个数III](https://leetcode.cn/problems/max-consecutive-ones-iii/description/)将x减到0的最小操作数 长度最小子数组 class Solution { public:int minSubArrayLen(int target, vector<int>& nums) {in…