简介 element-ui是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。 Layout布局(el-row、el-col) element-ui借用了bootstrap框架的思想,使用了栅格布局。它把单一的分栏分为24列。基本的使用方式如下 span属性:表示col所要占领的栅格占比个数。 offset属性:表示col相对偏移的个数。 Container布局容器 这些布局容器,一般充当div来使用。 el-container:外层容器。当子元素中包含 el-header 或 el-footer 时,全部子元素会垂直上下排列,否则会水平左右排列。 el-header:顶栏容器 el-footer:底部栏容器 el-aside:侧边栏容器 el-main:页面主视图 icons的使用 在element-ui 中,图标是用class就可以搞定的。 比如一个编辑的图标就可以如下表示: 按钮(el-button) 按钮是el-button来表示的 按钮是分类的,每一种类型就对应不同的button。 按钮的类型type可取值:’primary’、’success’、’warning’、’info’、’danger’ plain:决定了按钮是否使用素色系列。 round:决定了按钮是不是圆角展示。 各种button默认按钮 主要按钮 成功按钮 警告按钮 默认按钮 默认按钮 级联选择(el-cascader)
//组件 <el-cascader< p=""> :options="options" v-model="selectedOptions" @change="handleChange"> //data数据 options: [{ value:'1', label:'components', children: [{ label:'input' },{ label:'swiper' }] },{ value:'1', label:'views' },{ value:'1', label:'actions' }] TimePicker 时间选择器 picker-options是一个对象。 这个对象的属性有start、step、end、selectableRange等。 当设置selectableRange属性时,它提供了一个时间选择的点。 <el-time-select< p=""> v-model="value1" :picker-options="{ start:'08:30', step:'00:15', end:'18:30' }" placeholder="选择时间" > 日期选择器 日期选择器的type属性,决定选择的类型,这个type可以是date、week、month、year。 <el-date-picker< p=""> v-model="valueDate" type="date" placeholder="选择日期"> <el-date-picker< p=""> type='week' v-model='value' placeholder='选择周' > DateTimePicker 日期时间选择器 本质就是把type改为datetime。 <el-date-picker< p=""> v-model="value1" type="datetime" placeholder="选择日期时间"> form表单 element-ui的form表单组件:el-form element-ui的formItem组件:el-form-item 一个简单的form表单的实现如下: form表单还有验证:游戏出售平台form的rules就是用来验证使用。 Table 表格 el-table:element-ui的表格。 el-table-column:element-ui的表格所对应的列。 table属性中:stripe属性可以创建带斑马纹的表格。 table属性中:border属性可以创建带斑马纹的表格。 table属性中:height属性可实现固定表头的表格。 <el-table< p=""> :data="tableData" style="width: 100%" height="200" > Carousel 走马灯 其实就相当于一个轮播 type属性:可以让轮播卡片化 interval属性:定义轮播切换的周期 {{ item }}Collapse 折叠面板 折叠面板的el-collapse-item需要title属性。 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念; 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。 Navigation 导航 el-menu el-menu:表示导航菜单的盒子。 el-submenu:表示导航菜单的子盒子选项。 el-menu-item:表示导航菜单的每一项。 其中submenu和munuitem都是用于属性index。 处理中心 选项1 选项2 选项3 订单管理 el-tabs 用户管理 Tree 树形控件 data属性:代表着树形组件的渲染。 Vue学习示例demo 在Vue的学习中,这个体系非常大,包括Vue生命周期、Vue的指令和事件、Vue的组件传值、Vuex、Vue-router等的使用。 一个Vue学习的基础示例的笔记: github/liwudi/Vue.git Vue学习的项目演练 一个基于Vue、vuex、axios、vue-router的电商项目模板: github/liwudi/VueProject.git github/liwudi/manage-platform.git |
|
来自: 新用户26922hFh > 《待分类》