Element UI使用手册

这篇具有很好参考价值的文章主要介绍了Element UI使用手册。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1、前言:

2、Element UI的官方网站为:

3、使用Element UI

3.1 导入资源

3.2布局和容器组件

3.2.1 Layout布局

3.2.2Container布局容器

3.2.3卡片

 4、常用组件

4.1按钮组件

4.2消息提示

4.3表单

 4.3.1表单控件(Form Controls):



1、前言:

Element UI 是一个流行的开源前端组件库,用于构建 Web 用户界面。它主要设计用于 Vue.js,这是一个渐进式的 JavaScript 框架。Element UI 提供了一套预设计和样式化的 UI 组件,开发人员可以轻松地将它们集成到他们的 Vue.js 应用程序中。这些组件包括按钮、表单、表格、模态框、导航菜单等,可以显著加快开发过程,帮助创建一致且外观吸引人的用户界面。

Element UI 的关键特点和特性包括:

  1. Vue.js 集成:Element UI 特别设计为与 Vue.js 无缝集成,充分利用 Vue 的组件化架构。

  2. 自定义:尽管 Element UI 带有预设计的样式和主题,但它可以高度自定义。开发人员可以轻松地覆盖默认样式,以匹配项目的设计要求。

  3. 响应式设计:该库的设计目标是响应式的,适用于在桌面和移动设备上都表现良好的应用程序。

  4. 国际化(i18n):Element UI 内置了对多种语言的支持,允许开发人员创建可以轻松翻译和本地化的应用程序。

  5. 活跃的开发:截至我在2021年9月的最后一次知识更新时,Element UI 正在积极维护和更新。然而,开源项目的状态随时间可能会变化,因此建议您查阅项目的 GitHub 存储库或官方网站,以获取最新信息和更新。

  6. 庞大的社区:Element UI 拥有庞大且活跃的开发者社区,这意味着在使用时可以找到资源、文档和社区支持。

  7. 模块化架构:它使用模块化架构,意味着您可以只导入所需的组件,从而保持应用程序的轻量化。

  8. 可访问性:它遵循网络可访问性的最佳实践,力求提供易于访问的界面。

2、Element UI的官方网站为:

https://element.eleme.cn/#/zh-CN

3、使用Element UI

3.1 导入资源

CSS样式文件: Element UI的CSS文件包含了所有组件的样式
Vue的JS文件: Element UI基于Vue开发,需要引入相应版本的vue.js文件 
JS部分: Element UI的JS文件包含了组件的逻辑和交互行为

在html文件的<titlt>下导入下面资源
<!-- 引入Element UI CSS文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    
<!-- 引入Vue组件 -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>

<!-- 引入Element UI JS组件 -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
3.2布局和容器组件

3.2.1 Layout布局

el-row和el-col是用于响应式布局的基础组件
el-row用于创建一行
el-cal用于创建一列,
el-row是行容器,它的作用是用来组织和包含el-col,通过gutter属性可以设置栅格之间的空自距离。
el-col是列容器,它用来组织内容的布局。el-col 的宽度可以通过给:span属性设置一个值来调节。
:span属性的值表示当前el-col 占据整个行(el-row) 的宽度的份数,行的宽度被分为24份,
默认:span为24,则此时整个el-col的宽度为整个行的宽度。如果设置:span=12",则表示此el-col占据整个行的1/2宽度。
el-col还支持设置

  1. 行偏移(offset):在 Element UI 的栅格系统中,offset 属性用于在水平方向上将一个列偏移一定数量的列数。它是通过在一个 el-col 元素上设置 :offset="n",其中 n 是要偏移的列数,来实现的。例如,:offset="2" 表示将该列向右偏移两列的宽度。

  2. 列偏移(push)push 属性用于在水平方向上推动一个列,使其在布局中向右移动。与 offset 不同,push 不会影响布局中其他列的位置,只会将指定的列推向右侧。在 el-col 元素上使用 :push="n",其中 n 是要推动的列数。例如,:push="3" 表示将该列向右推动三列的宽度。

  3. 列拉动(pull)pull 属性与 push 相反,它用于将列向左拉动,从而重新排列布局中的列。在 el-col 元素上使用 :pull="n",其中 n 是要拉动的列数。例如,:pull="2" 表示将该列向左拉动两列的宽度。

3.2.2Container布局容器

在 Element UI 中,<el-container> 是一个布局容器组件,用于创建页面的整体布局。<el-container> 提供了一种简单的方式来划分页面的不同区域,通常包括头部、侧边栏、内容区域和底部。

以下是一些关于 <el-container> 布局容器的重要特性和用法:

  1. 布局结构:通常,一个页面可以被划分为以下几个区域:

    • <el-header>:用于放置页面的头部内容,例如导航菜单、标题等。
    • <el-aside>:用于侧边栏内容,通常用于导航链接、菜单等。
    • <el-main>:主要的内容区域,通常用于显示页面的主要内容。
    • <el-footer>:底部区域,用于放置页脚信息或者版权声明等。
  2. 布局嵌套:您可以嵌套多个 <el-container>,以创建更复杂的页面结构。例如,您可以在 <el-main> 区域再嵌套一个 <el-container>,以进一步划分主要内容区域。

  3. 弹性布局<el-container> 使用 Flexbox 布局模型,使得页面布局在不同屏幕尺寸下能够自适应。

  4. 自定义样式:您可以自定义 <el-container> 和其子组件的样式,以满足项目的设计需求。Element UI 提供了一些默认的样式,但您可以轻松地覆盖它们。

  5. 响应式设计:Element UI 的布局容器组件可以轻松地适应不同的屏幕尺寸和设备,以创建响应式设计。

  6. 以下是一个简单的示例,演示如何使用 <el-container> 创建一个基本的页面布局:

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-aside width="200px">Sidebar</el-aside>
    <el-main>Main Content</el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</template>
3.2.3卡片

<el-card> 是 Element UI 中的一个组件,用于创建带有卡片式样的容器。这个组件可以用于展示各种内容,如文章、产品信息、通知等。<el-card> 提供了一种简单的方式来创建带有标题、内容和操作区域的卡片。

以下是一些关于 <el-card> 组件的重要特性和用法:

  1. 标题和内容:您可以在 <el-card> 中设置标题和内容。标题通常会放置在卡片的顶部,而内容则可以包含文本、图片、其他组件等。

  2. 操作区域<el-card> 也支持操作区域,通常用于放置操作按钮、链接等。您可以在操作区域中放置任何内容,以便与卡片内容交互。

  3. 阴影效果<el-card> 可以通过添加阴影效果来创建卡片的浮动感,使其在页面上更加突出。

  4. 边框效果:卡片可以带有边框,以便与其他元素区分开来。

  5. 可扩展性<el-card> 可以包含其他 Element UI 组件,从而在卡片内部创建更丰富的内容。

 4、常用组件

4.1按钮组件

在Element UI中,可以使用el-button 标签来声明一个按钮, 并通过标签的属性来设定按钢的光的和样式。
el-button 的常用属性如下:
type:按钮类型,包括primary, success, warning, danger等,默认为default
size:按钮大小,包括medium, small, mini,默认为medium
icon: 按钮图标,可以使用element-ui中的icon名称或自定义图标class
plain: 是否是朴素按钮,朴素按钮背景透明
round:是否是圆角按钮
circle:是否是圆形按钮

4.2消息提示

在 Element UI 中,您可以使用消息提示来向用户显示通知、警告或成功消息。Element UI 提供了 this.$message 对象,该对象具有多个方法用于显示不同类型的消息提示。以下是一些常用的消息提示方法和选项:

  1. Message 提示
  • this.$message(options):显示一条基本的消息提示。
  • this.$message.success(message):显示成功消息提示。
  • this.$message.warning(message):显示警告消息提示。
  • this.$message.info(message):显示信息消息提示。
  • this.$message.error(message):显示错误消息提示。
<template>
  <div>
    <el-button @click="showMessage">Show Message</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    showMessage() {
      this.$message({
        message: 'This is a basic message'
      });

      this.$message.success('This is a success message');
      this.$message.warning('This is a warning message');
      this.$message.info('This is an info message');
      this.$message.error('This is an error message');
    }
  }
};
</script>
  1. 自定义消息选项

您还可以通过传递一个选项对象来自定义消息提示的外观和行为。

  • message:要显示的消息内容。
  • type:消息的类型,可以是 'success''warning''info''error'
  • duration:消息显示的持续时间(毫秒)默认为3000毫秒。
  • showClose:是否显示关闭按钮 默认为false。
  • center,表示是否居中显示,默认为false
  • onClose:消息关闭时的回调函数。
  • dangerouslyUseHTMLString, 表示message属性是否为一段HTML代码,默认为false

    <template>
      <div>
        <el-button @click="showCustomMessage">Show Custom Message</el-button>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        showCustomMessage() {
          this.$message({
            message: 'This is a custom message',
            type: 'success',
            duration: 3000,
            showClose: true,
            onClose: () => {
              console.log('Message closed');
            }
          });
        }
      }
    };
    </script>
    
    4.3表单

el-form是Element UI中的表单组件,用于创建包含验证和布局的表单。
在l-form组件中,每一个表单域由一个el-form-item 组件构成,表单域中可以放置各种类型的表单控件
表单控件:el-input、 el-select、el-checkbox、 el-radio、 el-switch、 el-datepicker、 el-timepicker.

el-form(表单组件)

  • <el-form> 是 Element UI 中的表单容器组件。
  • 通过 <el-form>,您可以创建包含验证和布局的表单。
  • model 属性可以用来实现表单数据的双向绑定,将表单控件的值与表单数据关联起来。
  • <el-form> 还提供了 rules 属性,用于定义表单项的校验规则。
<el-form :model="formData" :rules="formRules">
  <!-- 表单控件(el-form-item 内部) -->
</el-form>

 el-form-item(表单域)

  • <el-form-item> 用于包装表单中的单个控件,如输入框、下拉框等。
  • label 属性用于定义控件前的标签。
  • prop 属性用于设置校验规则时的字段名。
  • 表单控件可以嵌套在多个 <el-form-item> 内部以创建复杂的表单布局。
<el-form :model="formData">
  <el-form-item label="Name" prop="name">
    <el-input v-model="formData.name"></el-input>
  </el-form-item>
</el-form>
 4.3.1表单控件(Form Controls)
  • Element UI 提供了一系列的表单控件,用于收集不同类型的用户输入数据。
  • 一些常用的表单控件包括:
    • <el-input>: 文本输入框
    • <el-select>: 下拉框
    • <el-checkbox>: 复选框
    • <el-radio>: 单选框
    • <el-switch>: 开关
    • <el-datepicker>: 日期选择器
    • <el-timepicker>: 时间选择器

这些表单控件可以根据不同的需求用于构建表单,每个控件都具有相应的属性和事件,以满足不同的用户输入要求。通过将它们嵌套在 <el-form-item> 中,可以轻松地创建验证和布局良好的表单界面。

4.4表格

el-table(表格组件)

  • <el-table> 是 Element UI 提供的表格组件,用于展示和处理数据。
  • 它非常灵活,可以通过不同的配置和自定义来满足各种数据展示和交互需求。
  • 支持数据的分页、排序、筛选等功能,以及分组、合计、固定列等高级功能。
<el-table :data="tableData">
  <!-- el-table-column 组件 -->
</el-table>

el-table-column(表格列组件)

  • <el-table-column> 作为 <el-table> 的子组件,用于定义表格中的列。
  • 每个 <el-table-column> 代表表格的一列,您可以在其中配置列的各种属性和功能。
  • 通过 prop 属性指定该列对应的数据项,在表格的 :data 属性中传递数据数组。
<el-table :data="tableData">
  <el-table-column label="Name" prop="name"></el-table-column>
  <el-table-column label="Age" prop="age"></el-table-column>
</el-table>

在上述示例中,tableData 是一个数据数组,包含多个对象,每个对象代表表格中的一行数据。通过 <el-table-column>,您可以定义要在表格中显示的列,并使用 prop 属性将列与数据对象的属性关联起来。

el-table-column 常用属性

  1. label:列显示的名称。
  2. prop:列所对应的数据属性名称。
  3. width:列的宽度。
  4. min-width:列的最小宽度。
  5. sortable:该列的数据是否可排序。
<el-table :data="tableData">
  <el-table-column label="Name" prop="name" width="150"></el-table-column>
  <el-table-column label="Age" prop="age" sortable></el-table-column>
</el-table>

上述示例中的 <el-table-column> 设置了列的宽度和可排序属性。这些属性使得您可以根据需求自定义表格的外观和功能。

总之,Element UI 提供了强大而灵活的表格组件,通过 <el-table><el-table-column> 可以轻松地创建用于展示、编辑和交互的数据表格。文章来源地址https://www.toymoban.com/news/detail-753513.html

到了这里,关于Element UI使用手册的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element ui 的滚动条,Element UI 文档中没有被提到的滚动条

    element ui 的滚动条,Element UI 文档中被提到的滚动条 Element UI 官网中有用到自定义的滚动条组件,但是发布的所有版本中都不曾提及,个中原因我们不得而知,不过我们还是可以拿过来引用到自己的项目中。  使用的时候, 放在 el-scrollbar/el-scrollbar 标签内即可 如: 发现底部出

    2024年02月05日
    浏览(41)
  • 78.(前端)分配权限页面显示——树形结构使用(Element-ui的Tree树形控件)

    在前端的操作中,应该增加修改、删除、分配权限的操作 这次主要是实现分配权限的显示!!!!!! 更换icon图标,并设计大小 绑定函数,点击弹出提示框(DIalog对话框) 在对话框内,应该显示一个树形结构提供选择(Tree树形控件) 初始化树形结构,并填充数据

    2024年02月05日
    浏览(62)
  • vue前端直接使用element-ui的upload组件上传到阿里云OSS存储

    因为公司的服务器比较拉吧,所以老大决定将数据文件等上传到阿里云服务器,通过ali-oss方式,这样的话读取文件也比较快  (能看到这说明什么安装element-ui都会了,我就不详细介绍了,直接跳过)  在执行下面操作之前,你要确定你的阿里云能看到上边这个页面   这里主

    2024年02月10日
    浏览(63)
  • Element UI v2.15.13 离线文档

    一、概览 效果如下:   二、说明 1.官网地址:GitHub - ElemeFE/element: A Vue.js 2.0 UI Toolkit for Web             https://element.eleme.io/#/zh-CN 2.离线文档主要是在无网络情况下,方便查看组件代码示例,下载附件压缩包,解压后可在本机使用vscode通过Live Server插件就可以启动浏览器查看

    2024年02月13日
    浏览(69)
  • 【前端系列】Element-UI 悟道

    💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老 导航 檀越剑指大厂系列:全面总

    2024年02月06日
    浏览(53)
  • JavaScript与前端框架Element UI

    一、JavaScript概述 JavaScript(简称JS)是一种轻量级、解释性的、基于对象的脚本语言,用于Web开发中的客户端脚本。它是HTML和CSS的一部分,用于在浏览器中实现动态交互。 JavaScript最初由Netscape公司的Brendan Eich于1995年开发,旨在为网页添加动态内容。不同于编译型语言如Java和

    2024年04月29日
    浏览(42)
  • 简版的富文本编辑器、VUE+ElementUI 富文本编辑器 element ui富文本编辑器的使用(quill-editor) 不好用你来打我!全网醉简单!要复杂的别来!

    实现效果   1.安装插件 npm install vue-quill-editor --save 2.安装成功后在package.json中查看 3.在main.js中全局引入插件 4.页面实现 感谢老哥: ElementUI生成富文本编辑器 https://blog.csdn.net/keplerm/article/details/123379511?spm=1001.2101.3001.6650.9utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCom

    2024年02月16日
    浏览(72)
  • ​Vue + Element UI前端篇(二):Vue + Element 案例 ​

    打开 Visual Studio Code,File -- add Folder to Workspace,导入我们的项目。 安装依赖 Element 是国内饿了么公司提供的一套开源前端框架,简洁优雅,提供了 vue、react、angular 等多个版本,我们这里使用 vue 版本来搭建我们的界面。 访问:http://element-cn.eleme.io/#/zh-CN/component/installation ,官

    2024年02月09日
    浏览(42)
  • 解决 elementUI 的 table 表格改变数据不更新问题 解决 vue数据不更新问题 element-ui 表格数据不更新

    利用 v-if这些都是一个逻辑,都是改变事件,达到数据刷新,没必要用 v-if 消耗性能 比较耗性能

    2023年04月08日
    浏览(51)
  • Element UI:测试开发最爱的前端组件库

    在现代Web应用程序开发中,UI组件库是不可或缺的工具之一,它们提供了丰富多样的可重用组件,帮助开发者快速构建出美观、交互丰富的用户界面。 在众多的UI组件库中,Element UI因其简洁高效的设计风格、丰富多样的组件和良好的响应式设计,而备受广大测试开发的青睐,

    2024年04月25日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包