当前位置: 首页 > 工具软件 > Element > 使用案例 >

ElementUI

洪弘壮
2023-12-01

一、ElementUI

        1. 简介:VUE核心思想是组件和数据驱动,是每一个组件都需要自己编写模板样式添加事件,数据等是非常麻烦的,所以“饿了么”推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件。element-ui是一个ui库,它不依赖于vue,但是却是当前和vue配合做项目开发的一个比较好的ui框架。

        2. 使用方法

​         (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表单

​        ​ 1. 基本结构

​        ​ 表单控件

//“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)

​        ​ 1. 导航方向:通过mode属性设置

​        ​ 2. 菜单项

<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的上传组件将图片上传到服务器并保存到数据库中

​        ​ 2. 在el-table控件中将上传的图片显示出来

​        ​ 实现过程:

​        ​ 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. 实现分页的方式

​​        ​ (1)服务器端分页:通过底层的数据库来实现,前端会频繁的和服务器交互,客户端每次请求的是分页的数据而不是所有数据

​        ​ ​ (2)前端分页:一次性从数据库中取出数据缓存起来,然后对缓存中的数据进行分页处理

​        ​ 2. 实现分页的要素:

​        ​ ​ (1)总记录数

​        ​ ​ (2)每页显示的记录数

​​         ​ (3)需要的页数

​        ​ ​ (4)每页数据的起始索引

​        ​ 3. element-ui的分页组件

@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属性:总记录数
 类似资料: