elementUI学习笔记（一）

最新推荐文章于 2024-04-08 17:55:05 发布
最新推荐文章于 2024-04-08 17:55:05 发布
阅读量2.3k 收藏 3
点赞数 4
分类专栏： 前端 文章标签： vue.js html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42850724/article/details/109399347
版权
这篇博客介绍了elementUI的基本组件使用，包括按钮组件的使用方法，详细讲解了elementUI的布局系统，如基础的24分栏布局、Row和Col组件的间隔和偏移设置，以及flex布局的应用。此外，还涵盖了Form部分的Radio单选框，说明了如何设置v-model和disabled属性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

elementUI学习笔记（一）

文章目录

Basic

  • 按钮组件的使用

    使用elementui的相关组件时所有组件都是el-组件名开头
    在elementui中所有组件的属性全部写在组件标签上

    <el-button  属性名=“属性”>默认按钮</el-button>

  • 文字链接组件的使用

    <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>

  • layout布局和container布局容器

    通过基础的 24 分栏，迅速简便地创建布局
    通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局

    <el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
 </el-row>

    分栏间隔：Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0

    <el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <
最低0.47元/天 解锁文章
前端elementui学习笔记
10-07
这份“前端Element UI学习笔记”将深入探讨Element UI的核心概念、组件使用、布局技巧以及最佳实践，帮助前端开发者全面掌握这一强大的工具。 首先，作为Vue.js生态中的一个重要组成部分，Element UI秉承了Vue的...
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-基于ssm的云的学习笔记系统-ssm-java代码
最新发布
04-16
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-云的学习笔记管理系统java代码-云的学习笔记系统设计与实现-基于ssm的云的学习笔记系统-基于Web的云的学习笔记系统设计与实现-云的学习...
001_Layout布局
aihiao的专栏
02-15 1062
1. 使用图形化界面的方式创建项目 1.1. 使用命令vue ui, 打开图形化界面 1.2.在浏览器中创建项目 1.3.点击创建按钮, 选择创建项目的路径, 然后点击在此创建新项目 1.4.起一个项目名称, 包管理器使用默认的即可, 我们不使用git, 点击下一步按钮 1.5.选择手动配置项目, 点击下一步按钮 1.6.选择如下功能, 点击下一步按钮 1.7.选择如下配置, 点击创建项目按钮 1.8.创建项目, 不保存预设 1....
elementUI响应式布局@media：基于断点的隐藏类（文档篇）
草巾冒小子的博客
04-26 1万+
官方文档 · 说明参考： 响应式布局 · 文档说明 基于断点的隐藏类 · 文档说明 Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件： import 'element-ui/lib/theme-chalk/display.css'; 包含的类名及其含义为： . hidden-xs-only - ...
关于Element UI响应式布局问题
流浪的干尸的博客
01-04 1万+
关于Element UI响应式布局问题 文章目录关于Element UI响应式布局问题一、对于屏幕尺寸的定义二、Element UI提供的两种解决方案（一）在标签中指定元素所占大小（二）使用样式类指定元素是否显示三、不该被忘记的CSS语法 一、对于屏幕尺寸的定义 element UI参照Bootstrap的解决方案提供了五种屏幕大小尺寸：xs、sm、md、lg 和 xl。并对这五种尺寸提供了两种解决方案。 名称 尺寸 常用设备 xs <768px 超小屏 如：手机 sm ≥768p
自定义自适应display.css代码
Mr. Ding的小博客
01-05 1063
调用element-ui的display.css出现bug，索性自己写一个 ，留档保存 /* hidden-xs-only - 当视口在 xs 尺寸时隐藏 hidden-sm-only - 当视口在 sm 尺寸时隐藏 hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏 hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏 hidden-md-only - 当视口在 md 尺寸时隐藏 hidden-md-and-down - 当视口在 m...
ElementUI响应式Layout布局xs,sm,md,lg,xl
Mxy18851251178的博客
04-01 1675
参照了的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。包含的类名及其含义为：hidden-xs-only - 当视口在 xs 尺寸时隐藏hidden-sm-only - 当视口在 sm 尺寸时隐藏hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏hidden-md-only - 当视口在 md 尺寸时隐藏。
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-基于Web的云的学习笔记系统设计与实现-java代码
04-16
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-云的学习笔记管理系统java代码-云的学习笔记系统设计与实现-基于ssm的云的学习笔记系统-基于Web的云的学习笔记系统设计与实现-云的学习...
elementui的隐藏属性
qq_33455294的博客
11-25 1530
日常寻找并记录elementUI官方文档中未提及的隐藏属性
将页面元素隐藏的10种方法
jimojianghu的专栏
05-05 5146
在Web开发中，隐藏页面元素使其视觉不可见是一个非常常见的需求。为了实现这一目标，我们通常会采用多种方法，最常用的例如CSS的display属性，只要设置为node即可隐藏元素。本文将通过对当前所有可用的隐藏元素的方法做了一个总结，大概有10种方法可以使用。
Element_Ui组件隐藏功能与采用样式
weixin_45655721的博客
04-08 1011
Element_Ui组件隐藏功能与采用样式
element ui 断点类
jiaoqi6132的博客
06-18 780
@media only screen and (max-width:767px) { .hidden-xs-only { display: none!important } } @media only screen and (min-width:768px) { .hidden-sm-and-up { display: none!important } } @media only screen and (min-width:768px) and (max-width:9.
Element ui 隐藏组件
joke_d_biji的博客
07-14 1266
el-scrollbar 滚动条组件用于优化页内滚动条的UI效果，使用时必须指定高度！ 控制el-scrollbar内滚动条的方法与控制页面的滚动条的方法基本一样，只是获取el-scrollbar节点的滚动条时，需使用 this.$refs.scrollMenuRef.wrap 获取 el-scrollbar 内滚动条向下滚动的距离 控制 el-scrollbar 内滚动条滚动到指定位置比如，向下滚动 100px 完整范例代码...
element-ui中隐藏组件el-scrollbar的使用
云帆的博客
08-26 8516
一、使用 虽然官网没有介绍该组件，但是网上有许多小伙伴扒了源码并提供了使用方法 <el-scrollbar class="" view-class="" wrap-class="" tag=""> </el-scrollbar> 属性 props: { native: Boolean, // 是否使用本原生滚动条，设为true则不会启用element-ui自定义的滚动条 w
5.基于element-UI的权限验证
qq_39778055的博客
09-07 1304
在任何一个前后端项目中都会涉及到权限验证的问题，在vue-router中由于有了vue-router函数从而就使得权限验证很简单，基本的逻辑为用户登陆成功之后获取用于的token，再根据token去获取用户的权限信息，根据权限信息去匹配路由，从而动态生成路由表，再根据路由表去渲染侧边栏。其中需要使用到vuex进行全局的状态管理。 目录 1.addRoutes 2.代码实现 (1) router中的路由 (2)vuex中的状态管理 （3）permisson.js 3. 最终效果 4.Githu
bootstrap的辅助类
ddvh56566的博客
12-15 407
1、.hidden-lg、.hidden-md、.hidden-sm、.hidden-xs .hidden-lg:大屏幕（>=1200px时）隐藏 .hidden-md:中等屏幕（>=992px时）隐藏 .hidden-sm:小屏幕（>=768px时）隐藏 .hidden-xs:超小屏幕（<768px时）隐藏 需要让哪一部分隐藏，只需给相应的标签添加对应...
Bootstrap 响应式实用工具——visible-xs、visible-sm、hidden-xs、hidden-sm等
热门推荐
ICode联盟
05-23 2万+
转载于：点击打开链接 Bootstrap 提供了一些帮助器类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。 需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。 Class 设备 .visible-xs 额外的小设备（小于 768px）可见
Element-ui学习笔记1
weixin_33860553的博客
06-11 1155
1.col,row布局注意事项 el-row el-col gutter就是css，span的时候宽度是按boder-box来计算。 将type属性赋值为 'flex'，可以启用 flex 布局，并可通过justify属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式 xs、sm、md、lg和...
使用vuetify2.0的正确姿势
swallowblank的博客
07-14 1万+
使用vuetify的正确姿势 这个是根据我看的一些国外大佬的视频、文档，以及自己在平时中使用心得总结的用法。不一定是对的，只能说对我来说用的比较顺手，如有不足或建议，请提出指正。 1. 全局结构的组织 关于全局结构，一般如下所示： <v-app> <headbar /> <v-content id="main-content"> ...
基于Web的云学习笔记系统设计与实现
资源摘要信息:"云的学习笔记系统是一个基于Web的学习笔记管理系统，主要使用Java语言开发，采用了SSM框架（即Spring、Spring MVC、MyBatis的整合框架），运用了Vue前端技术和ElementUI界面组件。数据库方面，选择的...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值