目录
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 的关键特点和特性包括:
-
Vue.js 集成:Element UI 特别设计为与 Vue.js 无缝集成,充分利用 Vue 的组件化架构。
-
自定义:尽管 Element UI 带有预设计的样式和主题,但它可以高度自定义。开发人员可以轻松地覆盖默认样式,以匹配项目的设计要求。
-
响应式设计:该库的设计目标是响应式的,适用于在桌面和移动设备上都表现良好的应用程序。
-
国际化(i18n):Element UI 内置了对多种语言的支持,允许开发人员创建可以轻松翻译和本地化的应用程序。
-
活跃的开发:截至我在2021年9月的最后一次知识更新时,Element UI 正在积极维护和更新。然而,开源项目的状态随时间可能会变化,因此建议您查阅项目的 GitHub 存储库或官方网站,以获取最新信息和更新。
-
庞大的社区:Element UI 拥有庞大且活跃的开发者社区,这意味着在使用时可以找到资源、文档和社区支持。
-
模块化架构:它使用模块化架构,意味着您可以只导入所需的组件,从而保持应用程序的轻量化。
-
可访问性:它遵循网络可访问性的最佳实践,力求提供易于访问的界面。
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还支持设置
-
行偏移(offset):在 Element UI 的栅格系统中,
offset
属性用于在水平方向上将一个列偏移一定数量的列数。它是通过在一个el-col
元素上设置:offset="n"
,其中n
是要偏移的列数,来实现的。例如,:offset="2"
表示将该列向右偏移两列的宽度。 -
列偏移(push):
push
属性用于在水平方向上推动一个列,使其在布局中向右移动。与offset
不同,push
不会影响布局中其他列的位置,只会将指定的列推向右侧。在el-col
元素上使用:push="n"
,其中n
是要推动的列数。例如,:push="3"
表示将该列向右推动三列的宽度。 -
列拉动(pull):
pull
属性与push
相反,它用于将列向左拉动,从而重新排列布局中的列。在el-col
元素上使用:pull="n"
,其中n
是要拉动的列数。例如,:pull="2"
表示将该列向左拉动两列的宽度。
3.2.2Container布局容器
在 Element UI 中,<el-container>
是一个布局容器组件,用于创建页面的整体布局。<el-container>
提供了一种简单的方式来划分页面的不同区域,通常包括头部、侧边栏、内容区域和底部。
以下是一些关于 <el-container>
布局容器的重要特性和用法:
-
布局结构:通常,一个页面可以被划分为以下几个区域:
-
<el-header>
:用于放置页面的头部内容,例如导航菜单、标题等。 -
<el-aside>
:用于侧边栏内容,通常用于导航链接、菜单等。 -
<el-main>
:主要的内容区域,通常用于显示页面的主要内容。 -
<el-footer>
:底部区域,用于放置页脚信息或者版权声明等。
-
-
布局嵌套:您可以嵌套多个
<el-container>
,以创建更复杂的页面结构。例如,您可以在<el-main>
区域再嵌套一个<el-container>
,以进一步划分主要内容区域。 -
弹性布局:
<el-container>
使用 Flexbox 布局模型,使得页面布局在不同屏幕尺寸下能够自适应。 -
自定义样式:您可以自定义
<el-container>
和其子组件的样式,以满足项目的设计需求。Element UI 提供了一些默认的样式,但您可以轻松地覆盖它们。 -
响应式设计:Element UI 的布局容器组件可以轻松地适应不同的屏幕尺寸和设备,以创建响应式设计。
-
以下是一个简单的示例,演示如何使用
<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>
组件的重要特性和用法:
-
标题和内容:您可以在
<el-card>
中设置标题和内容。标题通常会放置在卡片的顶部,而内容则可以包含文本、图片、其他组件等。 -
操作区域:
<el-card>
也支持操作区域,通常用于放置操作按钮、链接等。您可以在操作区域中放置任何内容,以便与卡片内容交互。 -
阴影效果:
<el-card>
可以通过添加阴影效果来创建卡片的浮动感,使其在页面上更加突出。 -
边框效果:卡片可以带有边框,以便与其他元素区分开来。
-
可扩展性:
<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
对象,该对象具有多个方法用于显示不同类型的消息提示。以下是一些常用的消息提示方法和选项:
- 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>
- 自定义消息选项:
您还可以通过传递一个选项对象来自定义消息提示的外观和行为。
-
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 常用属性:
-
label
:列显示的名称。 -
prop
:列所对应的数据属性名称。 -
width
:列的宽度。 -
min-width
:列的最小宽度。 -
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>
设置了列的宽度和可排序属性。这些属性使得您可以根据需求自定义表格的外观和功能。文章来源:https://www.toymoban.com/news/detail-753513.html
总之,Element UI 提供了强大而灵活的表格组件,通过 <el-table>
和 <el-table-column>
可以轻松地创建用于展示、编辑和交互的数据表格。文章来源地址https://www.toymoban.com/news/detail-753513.html
到了这里,关于Element UI使用手册的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!