elementui框架中文网,vue-element-ui

简介element-ui是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。Layout布局(el-row、el-col)

1540908893079bc0fcb2c07~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717747897&x-signature=mBgAII%2BWNAoO24h%2FdW%2FWAM1JEuc%3D

介绍

element-ui是一个不依赖于vue的ui库。不过,它是目前使用Vue进行项目开发时使用的一个更好的UI框架。

布局布局(el-row、el-col)

Element-ui 借鉴了Bootstrap 框架的思想并使用网格布局。将一列拆分为24 列。基本用法如下

埃尔线

el-col :span=’6’div class=’grid-content bg-purple’/div/el-col

el-col :span=’6’div class=’grid-content bg-purple’/div/el-col

el-col :span=’6’div class=’grid-content bg-purple’/div/el-col

el-col :span=’6’div class=’grid-content bg-purple’/div/el-col

/L线

Span属性:表示该列占据的格子数量。

offset属性:表示col的相对偏移数。

容器布局容器

这些布局容器通常用作div。

el-container:外容器。如果子元素包含el-header 或el-footer,则所有子元素从上到下垂直对齐,否则它们将左右水平对齐。

el-header:顶栏容器

el-footer:底部栏容器

el-aside:侧边栏容器

el-main:页面主视图

使用图标

element-ui 允许您使用类创建图标。

例如,编辑图标可以表示为:

i 类=’el-icon-edit’/i

按钮(L按钮)

按钮由el-button 表示。

按钮被分类,每种类型对应不同的按钮。

按钮类型可以具有以下值:“主要”、“成功”、“警告”、“信息”和“危险”。

plain:确定按钮是否使用plain系列。

round:确定按钮是否显示为圆角。

div 类=’flexbox’

h2 各种按钮/h2

el-row class=’flex1 margin-left10′

el-col :span=’3’el-button默认按钮/el-button/el-col

el-col :span=’3’el-button type=’primary’ 主按钮/el-button/el-col

el-col :span=’3’el-button type=’success’成功按钮/el-button/el-col

el-col :span=’3’el-button type=’warning’ 警告按钮/el-button/el-col

el-col :span=’3’el-button plaindefault 按钮/el-button/el-col

el-col :span=’3’el-buttonround默认按钮/el-button/el-col

/L线

/div

级联选择(el-cascader)

154090884725611feec1a34~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1717747897&x-signature=yaM08TMUuE02qJtyYvhalvWzE2w%3D

//成分

埃尔卡斯奎德

:options=’选项’

v-model=’所选选项’

@change=’处理变更’

/埃尔卡卡德

//数据数据

选项: [{

值:’1′,

label:’组件’,

孩子: [{

label:’输入’

},{

label:“刷卡器”

}]

},{

值:’1′,

label:’查看’

},{

值:’1′,

label:’行动’

}]

TimePicker 时间选择器

picker-options 是一个对象。

该对象的属性包括start、step、end、selectableRange等。

设置selectableRange 属性提供了一个可供选择的时间点。

埃尔泰姆选择

v-model=’值1′

第:章

开始:’08:30′,

步骤:’00:15′,

结束:’18:30′

}’

placeholder=’选择时间’

/el-时间选择

日期选择器

日期选择器的类型属性决定选择的类型:日、周、月或年。

埃尔日期选择器

v-model=’起息日’

类型=’日期’

placeholder=’选择日期’

/el – 日期选择器

埃尔日期选择器

类型=’周’

v-model=’值’

placeholder=’选择周’

/el – 日期选择器

DateTimePicker 日期时间选择器

本质就是将类型改为datetime。

埃尔日期选择器

v-model=’值1′

type=’日期和时间’

placeholder=’选择日期和时间’

/el – 日期选择器

形式形式

element-ui form表单组件:el-form

element-ui 中的formItem 组件:el-form-item

这是一个简单的表单实现:

el-form :model=”

el-form-item label=’用户名’

左输入/左输入

/el-表单项

el-form-item label=’密码’

左输入/左输入

/el-表单项

/埃尔福尔

表单也有验证功能。表单规则用于验证。

桌子

el-table:元素ui表。

el-table-column:element-ui中table对应的Column。

表格属性:条纹属性允许您创建斑马图案表格。

对于表格属性:您可以使用边框属性创建斑马纹表格。

对于表格属性:高度属性允许您实现具有固定表头的表格。

埃尔表

:data=’表格数据’

样式=’width: 100%’

高度=’200′

el-table-column 固定宽度=’120′ label=’date’ prop=’date’/el-table-column

el-table-column width=’120′ label=’name’ prop=’name’/el-table-column

el-table-column width=’360′ label=’address’ prop=’address’/el-table-column

/el-表

旋转木马旋转灯笼

其实就相当于一个轮播

type 属性:允许将轮播转换为卡片

Interval属性:定义轮播切换的频率。

El 轮播高度=’150px’

el-carousel-item v-for=’第4 项’ :key=’项目’

h3{{项目}}/h3

/el-旋转木马-项目

/埃尔旋转木马

折叠折叠面板

折叠面板的el-collapse-item 需要一个title 属性。

el-collapse-item title=’一致性’ name=’1′

div 与现实世界一致。它与现实世界的流程和逻辑一致,遵循用户熟悉的语言和概念。

div 在界面内是一致的。所有元素和结构应保持一致,包括设计风格、图标和文本以及元素定位。 /div

/el-折叠-项目

导航导航

埃尔菜单

el-menu:代表导航菜单的框。

el-submenu:表示导航菜单中的子框选项。

el-menu-item:表示导航菜单中的每个项目。

其中,submenu和munuiitem都用作属性索引。

el-menu :default-active=’activeIndex’ class=’el-menu-demo’ mode=’horizontal’ @select=’handleSelect’

el-menu-itemindex=’1’处理中心/el-menu-item

el-子菜单索引=’2′

templateslot=’title’我的工作台/模板

el-menu-item 索引=’2-1′ 选项1/el-menu-item

el-menu-item 索引=’2-2′ 选项2/el-menu-item

el-menu-item 索引=’2-3′ 选项3/el-menu-item

/el-子菜单

el-menu-itemindex=’3’订单管理/el-menu-item

/El 菜单

埃尔塔布

el-tabs v-model=’activeName’

el-tab-pane label=’用户管理’ name=’first’

用户管理

/el-tab 窗格

/el-tab

树树控件

data属性:代表树组件的渲染。

el-tree :data=’data’ :props=’defaultProps’ @node-click=’handleNodeClick’/el-tree

Vue学习示例demo

在Vue研究中,这个系统非常庞大,包括Vue生命周期、Vue指令和事件、Vue组件值传递、Vuex使用、Vue路由器等等。

学习Vue的基本示例笔记:https://github.com/liwudi/Vue.git

Vue学习项目演练

基于Vue、vuex、axios、vue-router的电商项目模板:

https://github.com/liwudi/VueProject.git

https://github.com/liwudi/manage-platform.git

原创文章,作者:小条,如若转载,请注明出处:https://www.sudun.com/ask/82548.html

(0)
小条's avatar小条
上一篇 2024年5月31日 下午4:11
下一篇 2024年5月31日 下午4:11

相关推荐

  • 幻塔服务器互通的方法有哪些?

    网络安全是当今社会中备受关注的热门话题,随着互联网的普及和发展,网络安全问题也日益严峻。而在网络安全领域中,幻塔服务器互通技术备受关注。那么,你知道什么是幻塔服务器吗?它有哪些作用…

    行业资讯 2024年3月31日
    0
  • Android15安全架构

    最近在努力完善一个超大android安全架构的PPT,在制作DICE章节时,从网络上恶补了各种官方资料。遂把这些记录下来。希望对这块感兴趣的人能有一个帮助。同时也敬请大家期待And…

    2024年5月31日
    0
  • 免费收录的网站有哪些?

    你是否想知道,有哪些网站能够免费收录?或许你对网站收录还不太了解,但它却是网络行业中的重要一环。那么什么是网站收录呢?免费收录的网站又有什么意义和好处?哪些网站可以享受免费收录的待…

    行业资讯 2024年4月14日
    0
  • 服务器租用多少钱一月(详解)

    想必大家对于服务器租用这个话题都不陌生,但是你知道服务器租用多少钱一月吗?或许你会觉得这只是一个数字,但实际上它背后蕴含着网络安全加速行业的发展趋势、技术特点以及价格标准和影响因素…

    行业资讯 2024年3月20日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注