ElementUI
一、ElementUI
1. 简介：VUE核心思想是组件和数据驱动，是每一个组件都需要自己编写模板样式添加事件，数据等是非常麻烦的，所以“饿了么”推出了基于VUE2.0的组件库，它的名称叫做element-ui，提供了丰富的PC端组件。element-ui是一个ui库，它不依赖于vue，但是却是当前和vue配合做项目开发的一个比较好的ui框架。
（1）安装：npm install element-ui
（2）在main.js文件中进行全局的配置
import ElementUI from 'element-ui'//导入element-ui
import 'element-ui/lib/theme-chalk/index.css'//导入element-ui的样式文件
Vue.use(ElementUI)3. UI组件的使用：所有的DOM元素都带有前缀 el-
二、按钮
按钮：< el-button >
//1.1 按钮的类型
<el-button>普通按钮</el-button>
<el-button type="primary">Primary按钮</el-button>
<el-button type="info">Info按钮</el-button>
<el-button type="success">Success</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
//1.2 带边框的按钮(鼠标悬浮效果)
<el-button plain>普通按钮</el-button>
<el-button type="primary" plain>Primary按钮</el-button>
<el-button type="info" plain>Info按钮</el-button>
<el-button type="success" plain>Success</el-button>
<el-button type="warning" plain>Warning</el-button>
<el-button type="danger" plain>Danger</el-button>
//1.3 圆角按钮
<el-button round>普通按钮</el-button>
<el-button type="primary" round>Primary按钮</el-button>
<el-button type="info" round>Info按钮</el-button>
<el-button type="success" round>Success</el-button>
<el-button type="warning" round>Warning</el-button>
<el-button type="danger" round>Danger</el-button>
//1.4 带图标的圆形按钮
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="info" icon="el-icon-delete" circle></el-button>
//1.5 按钮不可用：disabled
//1.6 文字按钮：type='text'
//1.7 按钮组：
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">上一个</el-button>
<el-button type="primary">下一个<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
//1.8 加载中按钮：设置loading属性
<el-button type="primary" :loading="true">加载中</el-button>
//1.9 按钮的尺寸：设置按钮的size属性：medium(中等)、small(小型)、mini(超小)三、布局组件
布局组件：Layout（采用栅格布局方式，把一行分成24栏），用el-row表示行，
1. 用el-col表示列，每列有span属性，用来指定列的栏数，offset属性设置分栏之间的间隔
2. 给el-row设置gutter属性，可以指定每行的栏数，设置type=’flex’表示行的布局方式是flex
四、布局容器
布局容器：Container（搭建页面的基本结构）
1. <el-container>：外层容器，可以嵌套
2. <el-header>：顶栏容器。 有height属性设置高度，默认值为60px
3. <el-aside>：侧边栏容器。有width属性设置宽度，默认值为300px
4. <el-main>：主要区域容器。
5. <el-footer>：底栏容器。有height属性设置高度，默认值为60px
五、Table 表格
Table 表格：< el-table >
1. 属性包括：data（绑定表格的数据）、style（设置表格的样式）
2. 列：< el-table-column>，prop属性绑定的数据的键(key)、label属性（在页面中显示的列名）、width属性表示列宽
六、MessageBox 弹框
MessageBox 弹框：是模态框
1. 消息提示：当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。
this.$alert（‘消息框的内容’，‘消息框的标题’，{
confirmButtonText ：‘按钮上的文本’，
callback: ()=>{ } // 回调函数，当用户单击按钮时触发
}）
2. 确认消息：提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框
this.$confirm（‘消息内容’，‘标题’，{
confirmButtonText: ‘确定’，
cancelButtonText: ‘取消’，
type: ‘消息框的类型’ // （sucess、warning、info、error）
}）.then(()=>{ }) //用户单击‘确定’按钮后的操作代码
.catch(()=>{}) //用户单击‘取消’按钮后的操作
3. 引入MessageBox进行消息的提示
MessageBox.confirm（‘消息内容’，{
title：‘消息框的标题’，
confirmButtonText: ‘确定’，
cancelButtonText: ‘取消’，
type: ‘消息框的类型’ ， // （sucess、warning、info、error）
callback: function(){ } //单击确定按钮后的操作
}）
七、Message 消息提示
Message 消息提示：非模态框，常用于主动操作后的反馈提示。
this.$message（{
showClose：true，//是否显示关闭按钮
message：‘内容’,
type: ‘消息框的类型’， // sucess、warning、info、error，默认类型是info
duration：停留时间 //单位是毫秒，默认是3000毫秒
}）
Notification 通知
八、Form表单
表单控件
//“ref”：表示表单的别名，用于在js中定位form(this.$refs[‘ref属性值’])
//“rules”：用于定义表单控件的验证规则
//:model：用于绑定form,绑定后表单就是一个对象
//表单验证的语法：
this.$refs[“formName”].validate((valide)=>{
if(valide){
验证通过的操作
}else{
return false
}
})
//表单重置的语法：
this.$refs[“formName”].resetFields()
//表单内部控件的宽度设置 2. 表单控件
（1）单行文本框
<el-input v-model="input" placeholder="请输入内容"></el-input> （2）密码框
<el-input v-model="input" placeholder="请输入内容" show-password></el-input> （3）带图标的文本框
<el-input v-model="input" placeholder="请输入内容" ></el-input>
“suffix-icon”：表示在右边放置图标
“prefix-icon”：表示在左边放置图标 （4）文本域
<el-input type="textarea" v-model="textarea" :row="行数" placeholder="请输入内容" ></el-input> （5）开关：表示两种状态的切换
<el-switch
v-model="value"
active-color="#13ce66" //活动时的颜色
inactive-color="#ff4949"> // 关闭时的颜色
</el-switch> （6）复选框组和复选框
<el-checkbox-group v-model="checkList">
<el-checkbox label="复选框 A"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用" disabled></el-checkbox>
<el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group> （7）单选框组和单选按钮
<el-radio-group v-model="radio">
<el-radio label=""></el-radio> //普通单选按钮
<el-radio-button></el-radio-button> //单选按钮
</el-radio-group>九、Dialog组件
//对话框关闭之前
这是一段信息
@click="dialogVisible = false">取 消
@click="dialogVisible = false">确 定十、图像组件
< el-image>：保留了原生的img的属性
<el-image
style="width: 100px; height: 100px"
:src="url"
:fit="fit">
</el-image>
//1.src属性：图像的地址，绑定变量用来指定图片的地址，通常需要使用require来拉取图片
//2.fit属性：确定图片如何适应到容器框（'fill', 'contain', 'cover', 'none', 'scale-down'）
//3.lazy属性：图片懒加载（按需加载）十一、导航菜单（NavMenu）
<el-menu mode="方向" background-color="背景色" text-color="文本颜色"
default-active="默认打开的菜单"
active-text-color="活动的菜单的文本的颜色">
<el-submenu index="1"> //菜单项
<template slot="title"> //标题文本
<i class="el-icon-notebook-2"></i> //文本前的图标
<span>在线教材</span>
</template>
<el-menu-item index="1-1"> //子菜单项
<router-link to="/books" class="link">出版图书</router-link>
</el-menu-item>
<el-menu-item index="1-2">教案管理</el-menu-item>
<el-menu-item index="1-3">教材管理</el-menu-item>
</el-submenu>
//disabled属性：表示该菜单项不可用十二、上传组件：Upload
<el-upload
class="avatar-uploader"
style="margin-left: 30px;"
drag
action="http://localhost:8089/books/upload"
:show-file-list="false"
:on-change="handlePreview"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
multiple >
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将图书图片拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2M</div>
/el-upload>
//1.drag属性：表示是否启用拖拽上传
//2.action属性：上传服务器的地址
//3.show-file-list： 是否显示已上传文件列表(true/false)
//4.data：上传时是否需要附带额外的参数
//5.multiple：是否可以上传多个文件
//6.on-change事件：当上传文件的内容发生改变时触发，
//7.on-success事件：当上传成功后触发
//8.before-upload事件：在上传之前触发(通常用于检查上传文件的格式、大小)
对应的代码：
//before-upload事件的处理函数：图片上传之前的验证
beforeAvatarUpload(file) {
const isJPG = (file.type === 'image/jpeg'||'image/png');
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
this.imageUrl = ''
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
this.imageUrl = ''
}
return isJPG && isLt2M;
},
//on-change事件的处理函数：显示图片
handlePreview(file){
console.log('#####:',file)
this.imageUrl = URL.createObjectURL(file.raw)
},
//on-success事件触发的函数：图片上传成功后
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
}, 示例：
1. 使用elementUI的上传组件将图片上传到服务器并保存到数据库中
1. 给数据库中的数据表增加一列（image_url）：保存图片在服务器中存储路径
2. 在服务器端给BookModel增加一个属性imageUrl，该属性映射的是数据表中的image_url列
3. 在前端组件中使用FormData对数据进行打包：将表单控件的值和el-upload组件的值
（1）在组件的data中增加变量：uploadImage存放用户选择的文件信息
let formData = new FormData()
formData.append('bookName',this.form.bookName)
formData.append('bookAuthor',this.form.bookAuthor)
formData.append('publishTime',this.form.publishTime)
formData.append('bookPrice', this.form.bookPrice)
formData.append('uploadImage', this.uploadImage) （2）将formData提交给服务器端的接口
4. 在后台接口中使用formidable模块来解析formData中的数据
5. 将上传到服务器端的图片在客户端的表格（el-table）中显示出来
十三、分页组件
（1）服务器端分页：通过底层的数据库来实现，前端会频繁的和服务器交互，客户端每次请求的是分页的数据而不是所有数据
（2）前端分页：一次性从数据库中取出数据缓存起来，然后对缓存中的数据进行分页处理
（1）总记录数
（2）每页显示的记录数
（3）需要的页数
（4）每页数据的起始索引
@size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
//1.size-change事件：每页显示的记录数发生改变时触发，会自动给事件处理函数传递一个参数，参数值是新的每页显示的记录数
//2.current-change事件：当前的页码发生改变时触发，会自动给事件处理函数传递一个参数，参数值是新的页码
//3.current-page属性：当前页的页码
//4.page-sizes属性：每页显示的记录数的列表，属性值是一个数组
//5.page-size属性：当前每页显示的记录数，属性值是一个数字
//6.layout属性：分页组件的布局
//7.total属性：总记录数