目录
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文件的
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 中,
以下是一些关于
布局结构:通常,一个页面可以被划分为以下几个区域:
3.2.3卡片
以下是一些关于
标题和内容:您可以在
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):显示错误消息提示。
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');
}
}
};
自定义消息选项:
您还可以通过传递一个选项对象来自定义消息提示的外观和行为。
message:要显示的消息内容。type:消息的类型,可以是 'success'、'warning'、'info'、'error'。duration:消息显示的持续时间(毫秒)默认为3000毫秒。showClose:是否显示关闭按钮 默认为false。center,表示是否居中显示,默认为falseonClose:消息关闭时的回调函数。 dangerouslyUseHTMLString, 表示message属性是否为一段HTML代码,默认为false
export default {
methods: {
showCustomMessage() {
this.$message({
message: 'This is a custom message',
type: 'success',
duration: 3000,
showClose: true,
onClose: () => {
console.log('Message closed');
}
});
}
}
};
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-item(表单域):
4.3.1表单控件(Form Controls):
Element UI 提供了一系列的表单控件,用于收集不同类型的用户输入数据。一些常用的表单控件包括:
这些表单控件可以根据不同的需求用于构建表单,每个控件都具有相应的属性和事件,以满足不同的用户输入要求。通过将它们嵌套在
4.4表格
el-table(表格组件):
el-table-column(表格列组件):
在上述示例中,tableData 是一个数据数组,包含多个对象,每个对象代表表格中的一行数据。通过
el-table-column 常用属性:
label:列显示的名称。prop:列所对应的数据属性名称。width:列的宽度。min-width:列的最小宽度。sortable:该列的数据是否可排序。
上述示例中的
总之,Element UI 提供了强大而灵活的表格组件,通过
推荐文章
发表评论