0
0

Element UI使用手册

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>

可以轻松地创建用于展示、编辑和交互的数据表格。

标签： ui 前端 html
本文转载自: https://blog.csdn.net/ghw666666666/article/details/132590876
版权归原作者 查布嘎ghw 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Element UI使用手册”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

机器人技术在安全领域的重要作用

安全学习记录——网络篇（一）

图腾柱PFC：HP1010为您的电动两轮车之旅提供绿色，高效，安全的动力

单元测试数据库回滚问题

这才是单元测试，之前我们都错了

【C语言基础】：字符函数和字符串函数

ChatGPT-Next-Web SSRF漏洞+XSS漏洞复现(CVE-2023-49785)

文章导航