Vue开发实例(四)Element-UI部分组件使用方法

Element-UI的使用

  • 一、Icon图标的使用
    • 1、用 i 标签使用图标
  • 二、用 el-button 使用图标
    • 1、使用type定义样式
    • 2、使用plain定义样式
    • 3、使用round定义样式
    • 4、使用circle定义样式
    • 5、带图标和文字的按钮
    • 6、按钮禁用
    • 7、文字按钮
    • 8、按钮组
    • 9、加载中
  • 三、Link 文字链接
    • 1、基础用法
    • 2、禁用
    • 3、下划线
    • 4、图标

一、Icon图标的使用

Element提供了丰富的图标,基本能够满足日常的使用,可以到官网去查看。

在这里插入图片描述

1、用 i 标签使用图标

使用格式如下:

<i class=“el-icon-XXX”></i>

这里的XXX表示图标名,比如编辑用的 “edit” 用户头像的"user"

<div><i class="el-icon-edit"></i><i class="el-icon-user"></i>
</div>

在这里插入图片描述
可以通过样式来改变图标的大小和颜色,比如我们来修改一下user的大小和颜色,在style中加入样式

<style scoped>.el-icon-user{font-size: 30px;color: green;}
</style>

效果如下:
在这里插入图片描述

二、用 el-button 使用图标

按钮这在web开发中是非常常见的,这里就看看element按钮的一些使用方式

使用格式如下:

<el-button type=“primary” class=“el-icon-XXX”>按钮名称</el-button>
  1. 可以使用type、plain、round和circle属性来定义 Button 的样式
  2. type="primary"也可以不要,但是没那么好看,建议加上
  3. XXX表示图标的名字
  4. 按钮名称自己定义

在template中加入el-button代码

<div><el-button type="primary" class="el-icon-search">查询</el-button>
</div>

在这里插入图片描述
同样的也可以改样式

.el-icon-search{font-size: 20px;color: black;
}

1、使用type定义样式

type可以分为:primary、success、info、warning、danger
设定不同的type将会显示不同的颜色,如果type没有设定,或者设定的值不是这5个里面的,则会是默认没有颜色的按钮。

在这里插入图片描述

<template><div><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row></div>
</template>

在这里插入图片描述

2、使用plain定义样式

plain是一种使用简单的纯色样式,使用时候,只要加上这个属性即可,默认就是true

 <el-row><el-button plain>纯色按钮</el-button><el-button type="primary" plain>主要按钮</el-button><el-button type="success" plain>成功按钮</el-button><el-button type="info" plain>信息按钮</el-button><el-button type="warning" plain>警告按钮</el-button><el-button type="danger" plain>危险按钮</el-button>
</el-row>

在这里插入图片描述

3、使用round定义样式

就是将按钮变成圆角

<el-row><el-button round>圆角按钮</el-button><el-button type="primary" round>主要按钮</el-button><el-button type="success" round>成功按钮</el-button><el-button type="info" round>信息按钮</el-button><el-button type="warning" round>警告按钮</el-button><el-button type="danger" round>危险按钮</el-button>
</el-row>

在这里插入图片描述

4、使用circle定义样式

circle属性就是让按钮显示为圆形,加入circle试试

 <el-row><el-button circle>圆形按钮-文字</el-button><el-button type="primary" circle>主要按钮</el-button><el-button type="success" circle>成功按钮</el-button><el-button type="info" circle>信息按钮</el-button><el-button type="warning" circle>警告按钮</el-button><el-button type="danger" circle>危险按钮</el-button>
</el-row>

在这里插入图片描述
虽然实现了圆形按钮,但是我们发现这个圆形,不太圆,是因为文字太多导致比较长,于是我把最后一个按钮的名字“危险按钮”改成“危”,按钮确实变圆了。
在这里插入图片描述
但是项目中,很显然这种图标不是我们需要的,就一个字,我哪里知道是什么意思呢,于是我们想到是不是可以用图标来代替,图标我们还是很容易看懂它表示的意思,修改如下:

加入图标 class=“el-icon-XXX”
删除按钮名称

修改一部分代码

<el-button type="warning" circle class="el-icon-search"></el-button>
<el-button type="danger" circle class="el-icon-user"></el-button>

在这里插入图片描述

el-icon-user的变大,是因为之前的代码加了一个样式

5、带图标和文字的按钮

<el-row><el-button type="primary" icon="el-icon-edit"></el-button><el-button type="primary" icon="el-icon-share"></el-button><el-button type="primary" icon="el-icon-delete"></el-button><el-button type="primary" icon="el-icon-search">搜索</el-button><el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
</el-row>

在这里插入图片描述

6、按钮禁用

给按钮加上disabled属性即可,加上以后颜色也不一样了,鼠标移上去会显示不可用。

<el-row><el-button type="primary" disabled>主要按钮</el-button><el-button type="primary" plain disabled>主要按钮</el-button><el-button type="primary" circle disabled>主要按钮</el-button><el-button type="primary" icon="el-icon-delete" disabled></el-button><el-button type="primary" icon="el-icon-search" disabled>搜索</el-button>
</el-row>

在这里插入图片描述

7、文字按钮

将type设置为text: type=“text”

 <el-row><el-button type="text" >主要按钮1</el-button><el-button type="text" plain >主要按钮2</el-button><el-button type="text" circle >主要按钮3</el-button><el-button type="text" icon="el-icon-delete" disabled></el-button><el-button type="text" icon="el-icon-search" disabled>搜索</el-button>
</el-row>

在这里插入图片描述

8、按钮组

以按钮组的方式出现,常用于多项类似操作,比如分页中的上一页、下一页。

 <el-row><el-button-group><el-button type="primary" icon="el-icon-arrow-left">上一页</el-button><el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button></el-button-group>
</el-row>

在这里插入图片描述

9、加载中

只要设置loading属性为true即可。
常用于搜索的时候,搜索完成后设置 loading为false,用vue很好控制。

<el-row><el-button type="primary" :loading="true">加载中</el-button>
</el-row>

在这里插入图片描述

三、Link 文字链接

在这里插入图片描述

1、基础用法

 <div><el-link href="https://www.baidu.com" target="_blank">默认链接</el-link><el-link type="primary">主要链接</el-link><el-link type="success">成功链接</el-link><el-link type="warning">警告链接</el-link><el-link type="danger">危险链接</el-link><el-link type="info">信息链接</el-link></div>

在这里插入图片描述

2、禁用

设置 disabled 属性即可

<div><el-link href="https://www.baidu.com" target="_blank" disabled>默认链接</el-link><el-link type="primary" disabled>主要链接</el-link><el-link type="success" disabled>成功链接</el-link><el-link type="warning" disabled>警告链接</el-link><el-link type="danger" disabled>危险链接</el-link><el-link type="info" disabled>信息链接</el-link>
</div>

在这里插入图片描述

3、下划线

当鼠标移动到链接文字的时候,会有下划线,如果我不想要这个下划线,加入underline属性设置为false即可,写法如下::underline=“false”

<div><el-link href="https://www.baidu.com" target="_blank" :underline="false">默认链接</el-link><el-link type="primary" :underline="false">主要链接</el-link><el-link type="success" :underline="false">成功链接</el-link><el-link type="warning" :underline="false">警告链接</el-link><el-link type="danger" :underline="false">危险链接</el-link><el-link type="info" :underline="false">信息链接</el-link>
</div>

在这里插入图片描述

4、图标

<el-link icon="el-icon-edit">编辑</el-link>
<el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>

在这里插入图片描述


基础的使用就介绍到这里,其他的使用方法参考官网;
官网地址:https://element.eleme.cn/#/zh-CN/component/installation


全部代码

<template><div class="hello"><h1>{{ msg }}</h1><el-button>这是一个按钮</el-button><br /><br /><i class="el-icon-edit"></i><i class="el-icon-user"></i><br /><br /><el-button type="primary" class="el-icon-search">查询</el-button><br /><br /><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row><br /><br /><el-row><el-button plain>纯色按钮</el-button><el-button type="primary" plain>主要按钮</el-button><el-button type="success" plain>成功按钮</el-button><el-button type="info" plain>信息按钮</el-button><el-button type="warning" plain>警告按钮</el-button><el-button type="danger" plain>危险按钮</el-button> </el-row><br /><br /><el-row><el-button round>圆角按钮</el-button><el-button type="primary" round>主要按钮</el-button><el-button type="success" round>成功按钮</el-button><el-button type="info" round>信息按钮</el-button><el-button type="warning" round>警告按钮</el-button><el-button type="danger" round>危险按钮</el-button> </el-row><br /><br /><el-row><el-button circle>圆形按钮-文字</el-button><el-button type="primary" circle>主要按钮</el-button><el-button type="success" circle>成功按钮</el-button><el-button type="info" circle>信息按钮</el-button><el-button type="warning" circle class="el-icon-search"></el-button><el-button type="danger" circle class="el-icon-user"></el-button> </el-row><br /><br /><el-row><el-button type="primary" icon="el-icon-edit"></el-button><el-button type="primary" icon="el-icon-share"></el-button><el-button type="primary" icon="el-icon-delete"></el-button><el-button type="primary" icon="el-icon-search">搜索</el-button><el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button> </el-row><br /><br /><el-row><el-button type="primary" disabled>主要按钮</el-button><el-button type="primary" plain disabled>主要按钮</el-button><el-button type="primary" circle disabled>主要按钮</el-button><el-button type="primary" icon="el-icon-delete" disabled></el-button><el-button type="primary" icon="el-icon-search" disabled>搜索</el-button> </el-row><br /><br /><el-row><el-button type="text">主要按钮1</el-button><el-button type="text" plain>主要按钮2</el-button><el-button type="text" circle>主要按钮3</el-button><el-button type="text" icon="el-icon-delete" disabled></el-button><el-button type="text" icon="el-icon-search" disabled>搜索</el-button> </el-row><br /><br /><el-row><el-button-group><el-button type="primary" icon="el-icon-arrow-left">上一页</el-button><el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button></el-button-group> </el-row><br /><br /><el-row><el-button type="primary" :loading="true">加载中</el-button> </el-row><br /><br /><el-link href="https://www.baidu.com" target="_blank">默认链接</el-link>&nbsp;&nbsp; <el-link type="primary">主要链接</el-link>&nbsp;&nbsp;<el-link type="success">成功链接</el-link>&nbsp;&nbsp;<el-link type="warning">警告链接</el-link>&nbsp;&nbsp;<el-link type="danger">危险链接</el-link>&nbsp;&nbsp;<el-link type="info">信息链接</el-link>&nbsp;&nbsp;<br /><br /><el-link href="https://www.baidu.com" target="_blank" disabled>默认链接</el-link>&nbsp;&nbsp;<el-link type="primary" disabled>主要链接</el-link>&nbsp;&nbsp;<el-link type="success" disabled>成功链接</el-link>&nbsp;&nbsp;<el-link type="warning" disabled>警告链接</el-link>&nbsp;&nbsp;<el-link type="danger" disabled>危险链接</el-link>&nbsp;&nbsp;<el-link type="info" disabled>信息链接</el-link>&nbsp;&nbsp;<br /><br /><el-link href="https://www.baidu.com" target="_blank" :underline="false">默认链接</el-link>&nbsp;&nbsp;<el-link type="primary" :underline="false">主要链接</el-link>&nbsp;&nbsp;<el-link type="success" :underline="false">成功链接</el-link>&nbsp;&nbsp;<el-link type="warning" :underline="false">警告链接</el-link>&nbsp;&nbsp;<el-link type="danger" :underline="false">危险链接</el-link>&nbsp;&nbsp;<el-link type="info" :underline="false">信息链接</el-link>&nbsp;&nbsp;<br /><br /><el-link icon="el-icon-edit">编辑</el-link>&nbsp;&nbsp;<el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>&nbsp;&nbsp;</div>
</template><script>
export default {name: "HelloWorld",props: {msg: String,},
};
</script><style scoped>
.el-icon-user {font-size: 30px;color: green;
}
.el-icon-search {font-size: 20px;color: black;
}
</style>

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

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

相关文章

springboot245科研项目验收管理系统

科研项目验收管理系统 摘 要 使用旧方法对科研项目信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在科研项目信息的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次…

FreeROTS day2

总结DMA空闲中断接收数据的使用方法 首先要要选择串口然后配置串口的参数&#xff0c;配置MDA通道选择接受数据&#xff0c;配置空闲中断&#xff0c;定义一个数据接收的容器&#xff0c;启动MDA传输当串口收到数据时MDA将数据传输到容器中,MDA会一直检测是否有数据当有数据并…

数据结构界的终极幻神----树

目录 一.数的概念和分类 种类 二.重点概念 哈希树: 二叉树的线索化 什么是线索化 为什么要线索化 特殊的查找树 完全二叉树 三.手撕完全二叉树(堆) 重点讲解 向上搜索算法 向下搜索算法 一.数的概念和分类 树&#xff08;tree&#xff09;是包含 n(n≥0) [2] 个节…

使用lnmp环境部署laravel框架需要注意的点

1&#xff0c;上传项目文件后&#xff0c;需要chmod -R 777 storage授予文件权限&#xff0c;不然会报错file_put_contents(/): failed to open stream: Permission denied。 如果后面还是报错没有权限的话&#xff0c;就执行ps -ef |grep php查询php运行用户。然后执行chown …

express基础

express express介绍 官网传送门基于 Node.js 平台&#xff0c;快速、开放、极简的 Web 开发框架express特点 Web 应用 Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架&#xff0c;它提供一系列强大的特性&#xff0c;帮助你创建各种 Web 和移动设备应用。…

Mac 以SH脚本安装Arthas

SH脚本安装Aethas curl -L https://alibaba.github.io/arthas/install.sh | sh安装脚本说明 示例源文件&#xff1a; #! /bin/bash# temp file of as.sh TEMP_ARTHAS_FILE"./as.sh.$$"# target file of as.sh TARGET_ARTHAS_FILE"./as.sh"# update timeo…

什么是端点安全以及如何保护端点

什么是端点安全 端点是指可以接收信号的任何设备&#xff0c;是员工使用的一种计算设备&#xff0c;用于保存公司数据或可以访问 Internet。端点的几个示例包括&#xff1a;服务器、工作站&#xff08;台式机和笔记本电脑&#xff09;、移动设备、虚拟机、平板电脑、物联网、可…

ubuntu下使用MATLAB过程中的若干问题

ubuntu版本&#xff1a;Ubuntu 20.04 内核&#xff1a;Linux 5.15.0-97-generic MATALB版本&#xff1a;MATLAB R2022b 问题1&#xff1a;运行脚本时闪退 报错信息&#xff1a; Inconsistency detected by ld.so: ../elf/dl-tls.c: 517: _dl_allocate_tls_init: Assertion l…

数据指标是什么?为什么要建立指标体系?什么阶段建设?路径是什么?

数据指标是什么&#xff1f;为什么要建立指标体系&#xff1f;什么阶段建设&#xff1f;路径是什么&#xff1f; 一、什么是数据指标体系&#xff1f;二、为什么要建立指标体系&#xff1f;1、统一衡量业务好坏的标准2、指导产品的研发和运营工作3、帮助建设数据分析体系 三、什…

Android 蓝牙开发 入门级(史上最全)

第一节&#xff1a;了解蓝牙 1. 蓝牙基础 蓝牙是一种无线技术标准&#xff0c;用于短距离内的数据交换。 在Android设备上&#xff0c;蓝牙技术允许进行设备发现、配对、连接以及数据传输。 技术始于爱立信公司 1994 方案&#xff0c;它是研究在移动电话和其他配件间进行低功…

Redis面试问题纯享版

基础内容 1、简单介绍以下你了解的Redis 2、对比一下Redis和Memcache的异同&#xff1f; 3、为什么MySQL选用Redis作为缓存&#xff1f; 4、详细聊聊你对Redis各种数据类型的了解&#xff1f; 5、Redis中五种基本数据类型的底层数据结构是什么样的&#xff1f; Redis线程模型…

window mysql 安装出现的问题

1.安装到最后时&#xff0c;报错&#xff1a;authentication_string doesnt have a default value 解决办法&#xff1a; 1.不要关掉该页面&#xff0c;点击skip。 然后单击 back 回退到如下界面 2.去掉 Enable Strict Mode。 不要勾选 2. 最后一步&#xff1a;Start Servic…

一文读懂 Databend 的开放表格式引擎

本文介绍了 Databend 开放表格式引擎的支持情况&#xff0c;包括优势与不足、使用方法、与 Catalog 方案的对比。此外&#xff0c;还包含一个简单的 Workshop &#xff0c;介绍如何利用 Databend Cloud 分析位于对象存储中的 Delta Table 。 Databend 近期发布 Apache Iceberg …

小程序环形进度条爬坑

在做微信小程序的时候&#xff0c;发现用canvas做的环形进度条&#xff0c;在带滚动条的view里面显示有闪动、显示不全的问题&#xff0c;后面改成echart-weixin的pie图实现了&#xff0c;option配置如下 // 表示进度的百分比 var progressValue 70;option {series: [{type: …

深入解析Mybatis-Plus框架:简化Java持久层开发(八)

&#x1f340; 前言 博客地址&#xff1a; CSDN&#xff1a;https://blog.csdn.net/powerbiubiu &#x1f44b; 简介 本章节介绍如何通过Mybatis-Plus更新数据库中的数据。 本章节不需要前置准备&#xff0c;继续使用之前的测试类&#xff0c;数据库表进行操作。 &#x1f4…

Git 版本控制

Git 版本控制 1. About Version Control (关于版本控制)1.1. Local Version Control Systems (本地版本控制系统)1.2. Centralized Version Control Systems (集中化的版本控制系统)1.3. Distributed Version Control Systems (分布式版本控制系统) 2. 换行符的处理3. keyboard…

C# 由左上、右下两个坐标点计算矩形的长、宽以及两点的距离

一、计算长、宽 直接使用坐标点计算 // 定义矩形左上角和右下角的坐标 Point topLeft new Point(0, 0); Point bottomRight new Point(5, 10); // 计算矩形的长和宽 int width bottomRight.X - topLeft.X;//矩形宽度 int height bottomRight.Y - topLeft.Y;//矩形高度或是…

Vue中有哪些优化性能的方法?

Vue是一款流行的JavaScript框架&#xff0c;用于构建交互性强的Web应用程序。在前端开发中&#xff0c;性能优化是一个至关重要的方面&#xff0c;尤其是当应用程序规模变大时。Vue提供了许多优化性能的方法&#xff0c;可以帮助开发人员提升应用程序的性能&#xff0c;从而提升…

初学者如何使用QT新建一个包含UI界面的C++项目

文章目录 一、下载并安装QT51、下载安装包2、注册/登录账号3、安装qt6 二、新建QT Widget项目1、新建项目并且运行2、易错点&#xff1a;可能运行成功得到UI界面但是会报错&#xff08;原因是使用了中文路径&#xff09; 一、下载并安装QT5 1、下载安装包 进入下载网址 Windo…

链表习题-力扣oj (附加思路版)

LCR 140. 训练计划 IIhttps://leetcode.cn/problems/lian-biao-zhong-dao-shu-di-kge-jie-dian-lcof/ 给定一个头节点为 head 的链表用于记录一系列核心肌群训练项目编号&#xff0c;请查找并返回倒数第 cnt 个训练项目编号。 思路&#xff1a;双指针&#xff0c;快指针先走cnt…