一：简介

饿了么公司基于Vue开发了两套UI组件库，PC端组件库和移动端组件库。
一部分组件库是对原生的HTML标签元素的封装，增加了一些新的功能。
另一部分组件库是原生HTML标签元素没有的，是一些比较常用的独立的功能(如：分页、进度条、加载中、树形控件等)，将这些独立的常用的功能封装成一个新的组件库(自定义标签元素)。

Element UI: 基于Vue PC端的UI框架 http://element-cn.eleme.io/#/zh-CN
MintUI: 基于Vue移动端的UI框架 https://mint-ui.github.io/#!/zh-cn

二：element-ui 6大组件

Basic
- Layout 布局 <el-row>、<el-col>
- Container 布局容器 <el-container>、<el-header>、<el-aside>、<el-main>、<el-footer>
- Color 色彩
- Typography 字体
- Icon 图标 class="el-icon-xxx"、icon="el-icon-xxx"
- Button 按钮 <el-button>、<el-button-group>
Form
- Radio 单选框 <el-radio>、<el-radio-group>
- Checkbox 多选框 <el-checkbox>、<el-checkbox-group>
- Input 输入框 <el-input>
- InputNumber 计数器 <el-input-number>
- Select 选择器 <el-select>、<el-option>
- Cascader 级联选择器 <el-cascader>
- Switch 开关 <el-switch>
- Slider 滑块 <el-slider>
- TimePicker 时间选择器 <el-time-select>、<el-time-picker>
- DatePicker 日期选择器 <el-date-picker type="date">
- DateTimePicker 日期时间选择器 <el-date-picker type="datetime">
- Upload 上传 <el-upload>
- Rate 评分 <el-rate>
- ColorPicker 颜色选择器 <el-color-picker>
- Transfer 穿梭框 <el-transfer>
- Form 表单 <el-form>、<el-form-item>
Date
- Table 表格 <el-table>、<el-table-column>
- Tag 标签 <el-tag>
- Progress 进度条 <el-progress>
- Tree 树形控件 <el-tree>
- Pagination 分页 <el-pagination>
- Badge 标记 <el-badge>
Notice
- Alert 警告 <el-alert>
- Loading 加载 v-loading
- Message 消息提示 this.$message({ message: '成功', type: 'success' })
- MessageBox 弹框
  - this.$alert('内容', '标题', { }）
  - this.$confirm('内容', '标题', { })
  - this.$prompt('内容', '标题', { })
  - this.$msgbox({ })
- Notification 通知 this.$notify({title: '', message: '', type: 'success', position: 'top-left', offset: 100, dangerouslyUseHTMLString: true, duration: 0})
Navigation
- NavMenu 导航菜单 <el-menu>、<el-menu-item>、<el-submenu>
- Tabs 标签页 <el-tabs>、<el-tab-pane>
- Breadcrumb 面包屑 <el-breadcrumb>、<el-breadcrumb-item>
- Dropdown 下拉菜单 <el-dropdown>、 <el-dropdown-menu>、<el-dropdown-item>
- Steps 步骤条 <el-steps>、<el-step>
Others
- Dialog 对话框 <el-dialog>
- Tooltip 文字提示 <el-tooltip>
- Popover 弹出框 <el-popover>
- Card 卡片 <el-card>
- Carousel 走马灯 <el-carousel>、<el-carousel-item>
- Collapse 折叠面板 <el-collapse>、<el-collapse-item>

三：element-ui 其他

在引入Element时,可以传入一个全局配置对象, 该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。
Vue.use(Element, { size: ‘small’, zIndex: 3000 });
自定义主题: Element默认的主题色是鲜艳、友好的蓝色。通过在线主题生成工具(https://elementui.github.io/theme-chalk-preview/#/zh-CN)可以替换主题色，能够让 Element的视觉更加符合具体项目的定位。

四：Basic基础示例

这里只简单演示每个组件最基础的示例，每个组件都有丰富的属性，可以通过属性来控制组件的样式。

在使用element-ui组件之前要先在src/main.js中引入样式

import 'element-ui/lib/theme-chalk/index.css'

4.1 Layout 基础布局

<el-row>: 表示一行
<el-col>: 表示一列，一行中可以有多个列，一行占24栅格，可以通过el-col的:span属性来指定每列的宽度

<el-row>
  <el-col :span="8" style="background-color: orange"> 1 </el-col>
  <el-col :span="8" style="background-color: red"> 2 </el-col>
  <el-col :span="8" style="background-color: blue"> 3 </el-col>
</el-row>

在这里插入图片描述

4.2 Container 布局容器

用于快速搭建页面的基本结构

<el-container>：外层容器。当子元素中包含 <el-header>或 <el-footer>时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。

HelloWorld.vue

<template>
  <div>
    <el-container style="background-color: darkcyan; height: 100%; min-height: 100vh;" direction="vertical">
      <el-header>
        顶部栏
      </el-header>
      <el-container>
        <el-aside style="background: gray">
          左侧侧边栏
        </el-aside>
        <el-main style="background: dimgray">
          主要区域
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
body {
  margin: 0px;
}
</style>

在这里插入图片描述

扫描二维码关注公众号，回复： 5120826 查看本文章

4.3 Icon 图标

提供了一套常用的图标集合。直接通过设置类名为 el-icon-iconName 来使用即可。

<i class="el-icon-edit"></i>

在这里插入图片描述

4.4 Button 按钮

<el-button>按钮可以单独使用，也可以将多个按钮组成一组来使用(按钮组)

<el-button type="primary">主要按钮</el-button> <br><br>

<el-button-group>
  <el-button type="primary" icon="el-icon-edit"></el-button>
  <el-button type="primary" icon="el-icon-share"></el-button>
  <el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>

在这里插入图片描述

五：Form基础示例

5.1 Radio 单选框

<el-radio>可以单独使用，也可以分组(单选框组)使用。单选框组适用于在多个互斥的选项中选择的场景。

<template>
  <div>
    <br>
    <el-radio v-model="gender" label="1">男</el-radio>
    <el-radio v-model="gender" label="2">女</el-radio>

    <br>

    <el-radio-group v-model="choose">
      <el-radio :label="0">否</el-radio>
      <el-radio :label="1">是</el-radio>
      <el-radio :label="-1">全部</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      gender: '1',
      choose: 0
    }
  }
}
</script>

在这里插入图片描述

5.2 Checkbox 多选框

<el-checkbox>可以单独使用，也可以分组<el-checkbox-group>使用。

<template>
  <div>
    <el-checkbox v-model="checked">是否</el-checkbox> 

    <el-checkbox-group v-model="checkedList">
      <el-checkbox label="1">A</el-checkbox>
      <el-checkbox label="2">B</el-checkbox>
      <el-checkbox label="3">C</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      checked: true,
      checkedList: ['2']
    }
  }
}
</script>

在这里插入图片描述

5.3 Input 输入框

<el-input>可以通过type来指定时文本text还是textarea

注意：el-input也支持输入建议(<el-autocomplete>)，即用户输入一些关键字在input下面给出和用户输入相关的一些选项。这也是一个长用的功能, 该示例官网上有。

<template>
  <div>
    <el-input v-model="username" style="width: 150px" size="small" placeholder="请输入内容"></el-input>
    <br><br>
    <el-input v-model="content" type="textarea" style="width: 300px" autosize="true"></el-input>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      username: '',
      content: ''
    }
  }
}
</script>

在这里插入图片描述

5.4 InputNumber 计数器

<el-input-number>仅允许输入标准的数字值(整数或者小数)，可定义范围。

<template>
  <div>
    <br>
    <el-input-number v-model="num1"></el-input-number>
    <el-input-number v-model="num2" :min="1" :step="1" :max="10" :precision="2" @change="handleChange" controls-position="right"></el-input-number>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      num1: '',
      num2: ''
    }
  },
  methods: {
    handleChange (value) {
      console.log(value)
    }
  }
}
</script>

在这里插入图片描述

5.5 Select 选择器

<template>
  <div>
    单选：
    <el-select v-model="choose" clearable="true" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"></el-option>
    </el-select>

    <br><br>
    多选：
    <el-select v-model="multiChoose" multiple="true" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"></el-option>
    </el-select>

    <br><br>
    可搜索
    <el-select v-model="searchChoose" filterable="true" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      choose: '',
      multiChoose: '',
      searchChoose: '',
      options: [
        { value: 0, label: '全部' },
        { value: 1, label: '是' },
        { value: 2, label: '否' }
      ]
    }
  }
}
</script>

在这里插入图片描述

5.6 Cascader 级联选择器

注意：级联选择器的数据格式是固定的。

<template>
  <div>
    级联 <el-cascader v-model="choose" :options="options" expand-trigger="hover" change-on-select="true" filterable="true"></el-cascader>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      choose: '',
      options: [
        {
          value: '1',
          label: 'A',
          children: [
            {
              value: '11',
              label: 'AA',
              children: [
                {
                  value: '111',
                  label: 'AAA'
                }
              ]
            },
            {
              value: '12',
              label: 'AB'
            }
          ]
        },
        {
          value: '2',
          label: 'B',
          children: [
            {
              value: '21',
              label: 'BA'
            },
            {
              value: '22',
              label: 'BB'
            }
          ]
        }
      ]
    }
  }
}
</script>

在这里插入图片描述

5.7 Switch 开关

<template>
  <div>
    <br>
    开关：
    <el-switch v-model="choose" active-text="开" inactive-text="关" active-color="#13ce66" inactive-color="#c0ccda"></el-switch>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      choose: false
    }
  }
}
</script>

在这里插入图片描述

5.8 Slider 滑块

<template>
  <div>
    <br>
    <el-slider v-model="process" style="width: 200px; margin-left: 10px"></el-slider>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      process: 50
    }
  }
}
</script>

在这里插入图片描述

5.9 TimePicker 时间选择器

<template>
  <div>
    <br>
    固定时间点:
    <el-time-select v-model="choose" :picker-options="options"></el-time-select> <br><br>

    任意时间点: <el-time-picker v-model="choose" :picker-options="{selectableRange: '18:30:00 - 20:30:00'}"></el-time-picker>

    固定时间范围
    <el-time-select placeholder="起始时间" v-model="startTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"></el-time-select>
    <el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"></el-time-select>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      choose: '',
      startTime: '',
      endTime: '',
      options: {
        start: '08:30',
        step: '00:15',
        end: '18:30'
      }
    }
  }
}
</script>

在这里插入图片描述

5.10 DatePicker 日期选择器

DatePicker可以单独选择日期，也可以单独周、月、年或多个日期，也可以选择一个日期范围。

<template>
  <div>
    <br>
    <el-date-picker v-model="choose" type="date" format="yyyy 年 MM 月 dd 日" placeholder="请选择日期"></el-date-picker>
    <br><br>

    <el-date-picker v-model="range" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      choose: '',
      range: ''
    }
  }
}
</script>

在这里插入图片描述

5.10 DateTimePicker 日期时间选择器

<template>
  <div>
    <br>
    <el-date-picker v-model="choose" type="datetime" placeholder="请选择日期时间"></el-date-picker> <br><br>

    <el-date-picker v-model="range" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['9:00:00', '23:59:59']"></el-date-picker>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      choose: '',
      range: ''
    }
  }
}
</script>

在这里插入图片描述

5.11 Upload 上传

通过点击或者拖拽上传文件，可以限制用户上传的图片格式和大小

<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
  multiple :limit="3">
  <el-button type="primary" class="el-icon-upload">上传</el-button>
</el-upload>

在这里插入图片描述

5.12 Rate 评分

<el-rate v-model="score" allow-half="true" show-text="true"></el-rate>

在这里插入图片描述

5.13 Transfer 穿梭框

在这里插入图片描述

5.14 Form 表单

在Form组件中，每一个表单域由一个Form-Item组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。

<el-form>中有多个<el-form-item>

<el-form>属性
- :model:绑定表单中的属性
- ref: 指定引用名称，可以通过this.$refs[refName]来获取到该引用对象
- label-width: 文字描述的宽度
- :rules: Form组件提供了表单验证的功能，只需要通过:rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可。
  el-form-item中label属性用于指定表单域的描述
<el-form-item>属性
- label ：表单域描述
- prop：属性，用于规则校验和清空表单域时使用

注意：this.$refs[formName].resetFields();只能清除<el-form-item prop="foo">中指定prop属性的表单域

<template>
  <div style="margin: 20px;">
    <el-form :model="form" :rules="rules" ref="form" size="mini" :label-position="labelPosition" label-width="80px" style="width: 500px;" >
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-row>
          <el-col :span="11">
            <el-form-item prop="beginDate">
              <el-date-picker v-model="form.beginDate" type="date" style="width: 100%;" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="2" > - </el-col>
          <el-col :span="11">
            <el-form-item prop="endDate">
              <el-time-picker v-model="form.endDate" type="fixed-time" placeholder="选择时间" style="width: 100%;"></el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="即时配送" prop="delivery">
        <el-switch v-model="form.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="活动性质" prop="type">
        <el-checkbox-group v-model="form.type">
          <el-checkbox name="type" label="美食/餐厅线上活动"></el-checkbox>
          <el-checkbox name="type" label="地推活动"></el-checkbox>
          <el-checkbox name="type" label="线下主题活动"></el-checkbox>
          <el-checkbox name="type" label="单纯品牌曝光"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊资源" prop="resource">
        <el-radio-group v-model="form.resource">
          <el-radio label="线上品牌商赞助"></el-radio>
          <el-radio label="线下场地免费"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活动形式" prop="desc">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>

      <el-form-item v-for="(domain, index) in domains" :key="domain.key" :prop="'domain' + index" :label="'新增表单'">
        <el-input v-model="domain.value"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">提交</el-button>
        <el-button @click="resetForm('form')">清空</el-button>
        <el-button @click="addDomain">添加输入框</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    var checkDesc = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('描述不能为空'))
      }

      if (value.length < 10) {
        callback(new Error('描述大于10个字'))
      } else {
        callback()
      }
    }

    return {
      labelPosition: 'left',
      domains: [],
      form: {
        name: '',
        region: '',
        beginDate: '',
        endDate: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在3到5个字符', trigger: 'blur'}
        ],
        region: [
          {required: true, message: '请选择活动区域', trigger: 'change'}
        ],
        desc: [
          {validator: checkDesc, trigger: 'blur'}
        ]
      }
    }
  },

  methods: {
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit')
        } else {
          console.log(valid)
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    addDomain () {
      this.domains.push({
        value: '',
        key: Date.now()
      })
    }
  }
}
</script>

在这里插入图片描述

六：Notice

6.1 Alert 警告

用于页面中展示重要的提示信息。

title 提示内容
description 详细描述
type 提示的类型，包括success、info、warning、error
show-icon 布尔值，true会根据type的类型显示对应的图标
center 布尔值，true表示居中，默认左对齐
:closable 布尔值，是否有关闭的按钮
close-text 自定义关闭按钮的标题
@close 关闭提示框回调事件

<template>
  <div style="margin: 20px; width: 300px;">
    <el-alert title="成功提示" type="success" show-icon="true" center="true" :closable="false"></el-alert> <br>
    <el-alert title="消息提示" type="info" show-icon="true" close-text="关闭"></el-alert> <br>
    <el-alert title="警告提示" type="warning" show-icon="true" center="true" @close="handleAlertClose"></el-alert> <br>
    <el-alert title="错误提示" description="具体错误内容" type="error" show-icon="true" center="true"></el-alert>
  </div>
</template>
<script>
export default {
  methods: {
    handleAlertClose () {
      console.log('关闭了')
    }
  }
}
</script>

在这里插入图片描述

6.2 Loading 加载

element-ui为el-button、el-table等组件提供了v-loading指令，也提供了代码的方式来调用this.$loading({})

<template>
  <div style="margin: 20px; width: 300px;">
    <el-button type="primary"
               v-loading="isLoading"
               element-loading-text="拼命加载中"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.8)"
               @click="handleClick">指令+属性方式</el-button> <br>

    <el-button type="primary" v-loading.fullscreen.lock="isLoading" @click="handleClick">指令方式</el-button> <br>
    <el-button type="primary" @click="handleClick2">服务方式</el-button> <br>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isLoading: false
    }
  },
  methods: {
    handleClick () {
      this.isLoading = true
    },
    handleClick2 () {
      // 调用此方法会显示加载中
      let loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgb(0, 0, 0, 0)'
      })

      setTimeout(() => {
        // 关闭loading
        loading.close()
      }, 2000)
    }
  }
}
</script>

在这里插入图片描述

6.3 Message 消息提示

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

this.$message({
	message: '',
	type: ''
})

message 提示内容
type 可以是success、info、warning、error等
showClose : 表示是否带有关闭按钮，默认是3秒钟自动关闭
center : 表示文字居中
dangerouslyUseHTMLString : true 表示message中的字符串是HTML字符，会作为HTML来解析

<template>
  <div style="margin: 20px; width: 300px;">
    <el-button :plain="true" @click="$message('基本文字消息提示，3秒后自动消失')">提示</el-button>
    <el-button :plain="true" @click="handleClick">html提示</el-button>
    <el-button :plain="true" @click="errorTips">简写</el-button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick () {
      let ele = this.$createElement
      this.$message({
        message: ele('p', null, [
          ele('span', null, '内容可以是'),
          ele('i', {style: 'color: red'}, 'html元素')
        ]),
        type: 'success',
        showClose: true,
        center: true
      })
    },
    errorTips () {
      this.$message.error('错误提示')
    }
  }
}
</script>

在这里插入图片描述

6.4 MessageBox 弹框

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。

从场景上说，MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。

<template>
  <div style="margin: 20px; width: 300px;">
    <el-button type="text" @click="open">消息提示$alert</el-button>
    <el-button type="text" @click="open2">确认消息$confirm</el-button>
    <el-button type="text" @click="open3">提交内容$prompt</el-button>
    <el-button type="text" @click="open4">自定义$msgbox</el-button>
  </div>
</template>
<script>
export default {
  methods: {
    open () {
      this.$alert('这是一段内容', '<strong>标题名称<strong>', {
        confirmButtonText: '确定',
        dangerouslyUseHTMLString: true,
        callback: action => {
          console.log('action ${ action }')
        }
      })
    },
    open2 () {
      this.$confirm('是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        distinguishCancelAndClose: true
      }).then(() => {
        console.log('成功')
      }).catch(() => {
        console.log('失败')
      })
    },
    open3 () {
      this.$prompt('请输入邮箱', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '邮箱格式不正确'
      }).then(({value}) => {
        console.log(value)
      }).catch(() => {
        console.log('失败')
      })
    },
    open4 () {
      this.$msgbox({
        title: '标题',
        message: '内容',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) =>{
          if (action === 'confirm') {
            console.log('confirm')
          } else {
            done()
          }
        }
      }).then(action => {
        console.log(action)
      })
    }
  }
}
</script>

在这里插入图片描述

6.5 Notification 通知

悬浮出现在页面角落，显示全局的通知提醒消息。

type 类型:success、info、warning、error
position 弹出位置: bottom-left、bottom-right、top-left
offset 偏移量，数值类型
showClose 是否显示关闭按钮
duration 多少秒之后自动关闭，0：表示永不自动关闭

<template>
  <div style="margin: 20px; width: 300px;">
    <el-button type="text" @click="open">可自动关闭</el-button>
    <el-button type="text" @click="open2">简写形式</el-button>
  </div>
</template>
<script>
export default {
  methods: {
    open () {
      this.$notify({
        title: '标题名称',
        message: '<strong>右下角弹出</strong> 消息内容',
        position: 'bottom-right',
        offset: 50,
        duration: 0,
        type: 'info',
        dangerouslyUseHTMLString: true,
        showClose: true
      })
    },

    open2 () {
      this.$notify.info({
        title: '标题',
        message: '内容'
      })
    }
  }
}
</script>

在这里插入图片描述

七：其它

7.1 Tag 标签

用于标记和选择。

<template>
  <div style="margin: 20px;">
    <el-tag>标签一</el-tag>
    <el-tag type="success" size="small">标签二</el-tag>
    <el-tag type="info" closable @close="handleClose(tag)">标签三</el-tag>
    <el-tag type="warning" size="medium">标签四</el-tag>
    <el-tag type="danger" size="mini">标签五</el-tag>
  </div>
</template>
<script>
export default {
  methods: {
    handleClose (tag) {
      console.log(tag)
    }
  }
}

在这里插入图片描述

7.2 Progress 进度条

用于展示操作进度，告知用户当前状态和预期。

:percentage 百分比，数值 0 - 100
status 状态 success: 绿色, exception: 红色，text
:stroke-width 进度条的高度
text-inside 百分比提示是否放在进度条内显示还是放在进度条末尾显示
color 进度条颜色
type line：线性，circle：圆形
width 调整圆形进度条的大小

<template>
  <div style="margin: 20px; width: 300px">
    <el-progress :percentage="0" text-inside="true" color="rgba(142, 113, 199, 0.7)"></el-progress>
    <el-progress :percentage="100" status="success"></el-progress>
    <el-progress :percentage="50" status="exception" :stroke-width="15"></el-progress>

    <el-progress :percentage="66" type="circle" width="60"></el-progress>
  </div>
</template>

在这里插入图片描述

7.3 Badge 标记

出现在按钮、图标旁的数字或状态标记。

:value 提示的数字值
type 表示微标的颜色primary：蓝色，warning:橘黄色, 默认是红色
:max 当:value的值超过:max的值，微标的值就会显示 :max+
value 字符串类型，表示微标的内容

<template>
  <div style="margin: 20px;">
    <el-badge :value="110" :max="99">
      <el-button size="small">评论</el-button>
    </el-badge>
    <br><br>
    <el-badge value="new">
      <el-button size="small">回复</el-button>
    </el-badge>
    <br><br>
    <el-badge is-dot>消息</el-badge>
    <br> <br>
    <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        点击我查看 <i class="el-icon-caret-bottom el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item class="clearfix">
          评论 <el-badge class="mark" :value="12"></el-badge>
        </el-dropdown-item>
        <el-dropdown-item class="clearfix">
          回复 <el-badge class="mark" :value="3"></el-badge>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

在这里插入图片描述

7.4 Steps 步骤条

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。

:active 数值类型，从0开始，表示当前步骤
finish-status 完成过的状态，枚举值 success、wait、finsh、process、error等
:space 表示每个步骤相间隔的距离
align-center title和description 是否居中
direction 步骤条的方向可以是水平或者垂直
simple 简约风格

<template>
  <div style="margin: 20px; width: 600px">
    <el-steps :active="active" :space="200" align-center="true" finish-status="success">
      <el-step title="步骤1" icon="el-icon-edit" description="步骤1描述文字"></el-step>
      <el-step title="步骤2" icon="el-icon-upload" description="步骤2描述文字"></el-step>
      <el-step title="步骤3" icon="el-icon-picture" description="步骤3描述文字"></el-step>
    </el-steps>
    <br>
    <el-button @click="next">下一步</el-button>
    <br><br>
    <el-steps :active="active" finish-status="success" simple="true" >
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>
  </div>
</template>
<script>
export default {
  data () {
    return {
      active: 1
    }
  },
  methods: {
    next () {
      if (this.active++ > 2) {
        this.active = 0
      }
    }
  }
}
</script>

在这里插入图片描述

7.5 Dropdown 下拉菜单

trigger 触发方式 hover、click
@command 命令事件当点击选项后会调用该方法，传参数command值

<template>
  <div style="margin: 20px; width: 600px">
    <el-dropdown trigger="hover">
      <span class="el-dropdown-link">
        下拉菜单 <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>上海生煎</el-dropdown-item>
        <el-dropdown-item>河南烩面</el-dropdown-item>
        <el-dropdown-item disabled="">桂林米饭</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-dropdown @command="handleCommand" trigger="click" size="medium">
      <el-button type="primary">
        下拉菜单 <i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="a">上海生煎</el-dropdown-item>
        <el-dropdown-item command="b">河南烩面</el-dropdown-item>
        <el-dropdown-item command="c" disabled>桂林米饭</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  methods: {
    handleCommand (command) {
      console.log(command)
    }
  }
}

在这里插入图片描述

7.6 Breadcrumb 面包屑

显示当前页面的路径，快速返回之前的任意页面。

separator 分割符
separator-class=“el-icon-arrow-right” 分割符为 >
:to 表示路由的路径

<template>
  <div style="margin: 20px; width: 600px">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{path: '/'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script>

在这里插入图片描述

7.7 Tree 树形控件

用清晰的层级结构展示信息，可展开或折叠。

:props 用于定义文本和子节点字段名，默认是文本字段名是label、子节点字段名是children、disabled
-node-key 节点key字段名
show-checkbox 是否显示复选框
:default-expanded-keys="[key, key2]" 设置默认要展开的节点，值为数组，元素为要展开的key值
default-expand-all 展开所有节点
:default-checked-keys="[key]" 设置默认要选中的节点
draggable 是否允许拖拽

tree

getCheckedNodes() 获取选中的节点数据对象
getCheckedKeys() 获取选中的节点key
setCheckedNodes([]) 设置要选中的节点，参数为数组，元素为节点数据, 参数为空数组表示取消所有的选中

<template>
  <div style="margin: 20px;">
    <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" :default-expanded-keys="[1]" :default-checked-keys="[12]"
             show-checkbox draggable @node-click="handleNodeClick"></el-tree>

    <el-button @click="getSelectedNode">获取选中的节点</el-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      data: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {id: 11, label: '一级 1-1'},
            {id: 12, label: '一级 1-2'},
            {id: 13, label: '一级 1-3', disabled: true}
          ]
        },
        {
          id: 2,
          label: '二级 2'
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick (data) {
      console.log(data)
    },

    getSelectedNode () {
      console.log(this.$refs.tree.getCheckedNodes())
      console.log(this.$refs.tree.getCheckedKeys())
    }
  }
}
</script>

在这里插入图片描述

八：其它

8.1 Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。
自定义列模板，el-table-column不仅仅可以是一个普通的文本列名，还可以用template作为列名,通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。
:formatter 属性可以用来格式化属性值
默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。
使用带斑马纹的表格，可以更容易区分出不同行的数据。stripe属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用。
纵向内容过多时，可选择固定表头。只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。
可将表格内容highlight显示，方便区分「成功、信息、警告、危险」等内容。可以通过指定 Table 组件的 :row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。success-row、warning-row。注意 stripe=“true” 和 :row-class-name 不能同时使用。
横向内容过多时，可选择固定列。固定列需要使用fixed属性，它接受 Boolean 值或者leftright，表示左边固定还是右边固定。
el-table-column 可以只定义label属性，不定义prop属性，该列的值可以使用``` ````来定义，可以在template写一些HTML元素等，通过scope.row能获取到该行对应的数据data。也就是说el-table-column的值不是:data中的值而是使用模板自定义的其它内容
流体高度：当数据量动态变化时，可以为 Table 设置一个最大高度。通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。当column嵌套column时父column只需定义label不需要定义prop
单选：选择单行数据时使用色块表示。只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号。也可以自定义索引值，通过:index设置一个方法，方法的参数一个从0开始的索引，方法的返回值就是自定义的索引值。
多选: 选择多行数据时使用 Checkbox。el-table-column，设type属性为selection即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。
排序: 对表格进行排序，可快速查找或对比数据。
- 在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。
- 可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。
- 可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。
合并行或列：多行或多列共用一个数据时，可以合并行或列。通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。
表尾合计行：若表格展示的是各类数字，可以在表尾显示各列的合计。将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中。
筛选：对表格进行筛选，可快速查找到自己想看的数据。在列中设置filtersfilter-method属性即可开启该列的筛选，filters 是一个数组，filter-method是一个方法，它用于决定某些数据是否显示，会传入三个参数：value, row 和 column。
展开行：当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。通过设置列的type=“expand” 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。

table

setCurrentRow([row1, row2]) 设置要选中的行，传空数组就是取消选中
toggleRowSelection(row) 设置指定的checkbox选中
clearSelection() 取消checkbox的所有选中

scope

row
column
$index
store

<template>
  <div style="margin: 20px; width: 1000px">
    <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
              ref="table" border :row-class-name="tableRowClassName"
              highlight-current-row @current-change="handleChange" @selection-change="handleSelectionChange"
              tooltip-effect="dark" :default-sort="{prop: 'date', order: 'descending'}"
              show-summary height="350px">
      <el-table-column type="selection" width="60"></el-table-column>
      <el-table-column type="index" width="50" fixed="left"></el-table-column>
      <el-table-column label="姓名" prop="name" :filters="filters" :filter-method="filterHandler" width="100px"></el-table-column>
      <el-table-column label="年龄" prop="age" width="100px"></el-table-column>
      <el-table-column label="日期" prop="date" :formatter="formatter" sortable width="200px">

      </el-table-column>
      <el-table-column label="详细地址" align="center">
        <el-table-column label="省份" prop="province" width="100px"></el-table-column>
        <el-table-column label="市区" prop="city" width="100px"></el-table-column>
        <el-table-column label="地址" prop="address" width="100px" show-overflow-tooltip></el-table-column>
      </el-table-column>
      <el-table-column label="描述" width="100px">
        <tmplate slot-scope="scope">
          <i class="el-icon-info"></i>
          {{ scope.row.description }}
        </tmplate>
      </el-table-column>
      <el-table-column fixed="right" width="200px">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="请输入关键字进行搜索"></el-input>
        </template>
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row, scope.$index)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br><br>
    <el-button @click="selectRow([1])">选中第二行</el-button>
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">选中第二行、第三行</el-button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      tableData: [
        {
          id: 1,
          name: '群主',
          age: 18,
          date: '2019-01-11',
          province: '上海市',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          description: '黑黑的'
        },
        {
          id: 2,
          name: 'mengday',
          age: 19,
          date: '2019-01-12',
          province: '上海市',
          city: '浦东新区',
          address: '上海市浦东新区张江镇',
          description: '帅帅的'
        },
        {
          id: 3,
          name: '肥仔',
          age: 20,
          date: '2019-01-13',
          province: '上海市',
          city: '虹口区',
          address: '上海市虹口区益江路',
          description: '胖胖的'
        },
        {
          id: 4,
          name: '蝈蝈',
          age: 21,
          date: '2019-01-14',
          province: '上海市',
          city: '青浦区',
          address: '上海市浦东新区张江镇',
          description: '黑黑的'
        },
        {
          id: 5,
          name: '豪奎',
          age: 22,
          date: '2019-01-15',
          province: '上海市',
          city: '浦东新区',
          address: '上海市浦东新区张江镇',
          description: '美美的'
        }
      ],
      currentRow: null,
      multipleSelection: [],
      filters: [
        {text: '豪奎', value: '豪奎'},
        {text: '蝈蝈', value: '蝈蝈'},
        {text: '肥仔', value: '肥仔'},
        {text: 'mengday', value: 'mengday'},
        {text: '群主', value: '群主'}
      ],
      search: ''
    }
  },
  methods: {
    tableRowClassName ({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }

      return ''
    },
    formatter (row, column) {
      return row.date + ' 00:00:00'
    },
    handleClick (row, index) {
      console.log(row + '-' + index)
    },
    handleChange (currentRow, oldCurrentRow) {
      this.currentRow = currentRow
    },
    selectRow (row) {
      this.$refs.table.setCurrentRow(row)
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.table.toggleRowSelection(row)
        })
      } else {
        this.$refs.table.clearSelection()
      }
    },
    filterHandler (value, row, column) {
      const prop = column['property']
      return row[prop] === value
    }
  }
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

在这里插入图片描述

动态列

tableColumns中的prop值为tableData中要显示的属性名。label表示列名，prop表示每行中的列对应的值。:表示属性的值是一个表达式而不是普通字符串。

<template>
  <div style="width: 300px">
    <el-table :data="tableData" border>
      <el-table-column v-for="column in tableColumns" :key="column.prop"
                       :label="column.label" :prop="column.prop">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tableColumns: [
        {prop: 'id', label: 'ID'},
        {prop: 'username', label: '用户名'},
        {prop: 'age', label: '年龄'}
      ],
      tableData: [
        {id: 1, username: 'mengday', age: 28},
        {id: 2, username: 'vbirdbest', age: 29},
        {id: 3, username: 'along', age: 30}
      ]
    }
  }
}
</script>

在这里插入图片描述

8.2 Pagination 分页

当数据量过多时，使用分页分解数据。根据场景需要，可以添加其他功能模块(显示总数、调整每页显示条数、直接前往、完整功能)

layout: 设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。
- prev表示上一页，
- pager表示页码列表
- next为下一页，
- jumper表示跳页元素
- :total表示总条目数
- sizes用于设置每页显示的页码数量
- -> 特殊的布局符号后的元素会靠右显示
- solt
pager-count: 默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过pager-count属性可以设置最大页码按钮数。
background : 设置background属性可以为分页按钮添加背景色。
small: 在空间有限的情况下，可以使用简单的小型分页。只需要一个small属性，它接受一个Boolean，默认为false，设为true即可启用。
size-change：页码大小改变事件
current-change：当前页变动时候触发的事件
page-sizes接受一个整型数组，数组元素为展示的选择每页显示个数的选项，[100, 200, 300, 400]表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。

<template>
  <div style="margin: 20px;">
    <el-pagination layout="total, sizes, prev, pager, next, jumper"
                   :total="1000"
                   :page-sizes="[20, 40, 50, 100, 200]"
                   @size-change="handleSizeChange"
                   :page-size="20"
                   :current-page="currentPage"
                   @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      currentPage: 1
    }
  },
  methods: {
    handleSizeChange (size) {
      console.log(`每页 ${size} 条`)
    },
    handleCurrentChange (currentPage) {
      console.log(`当前页 ${currentPage} 条`)
    }
  }
}
</script>

在这里插入图片描述

8.3 NavMenu 导航菜单

为网站提供导航功能的菜单。

mode 导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式horizontal。
background-color 设置菜单的背景色
text-color 菜单的文字颜色
active-text-color 当前激活菜单的文字颜色
disabled 是否可以选中

<template>
  <div style="margin: 20px; width: 200px">
    <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect"
      background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
      @open="handleOpen" @close="handleClose">
      <el-menu-item index="1">菜单1</el-menu-item>
      <el-submenu index="2">
        <template slot="title">菜单2</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="2-1">2-1</el-menu-item>
          <el-menu-item index="2-2">2-2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <template slot="title">分组二</template>
          <el-menu-item index="2-3" disabled>2-3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">2-4</template>
          <el-menu-item index="2-4-1">2-4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">菜单3</a></el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

默认是垂直方式
在这里插入图片描述

水平方式 mode=“horizontal”。水平方式适合面向用户的网站，垂直方式适合管理系统。
在这里插入图片描述

8.4 Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

type : 选项卡样式(标签风格card、卡片化border-card)
tabPosition : 设置标签的位置(left|right|top|bottom)

<template>
  <div style="margin: 20px; width: 400px">
    <el-radio-group v-model="tabPosition">
      <el-radio-button label="top">top</el-radio-button>
      <el-radio-button label="bottom">bottom</el-radio-button>
      <el-radio-button label="left">left</el-radio-button>
      <el-radio-button label="right">right</el-radio-button>
    </el-radio-group>
    <br><br>

    <el-tabs v-model="activeTabName" @tab-click="handleTabClick" :tab-position="tabPosition" type="card">
      <el-tab-pane label="Tab1" name="first">Tab1</el-tab-pane>
      <el-tab-pane label="Tab2" name="second">Tab2</el-tab-pane>
      <el-tab-pane label="Tab3" name="third">Tab3</el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i>自定义标签页内容</span>
        自定义标签页内容
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      activeTabName: 'first',
      tabPosition: 'top'
    }
  },
  methods: {
    handleTabClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

在这里插入图片描述

动态增加或删除tab页

<template>
  <div style="margin: 20px; width: 400px">
    <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleEdit">
      <el-tab-pane v-for="tab in tabs" :label="tab.label" :name="tab.name" :key="tab.name">
        {{ tab.content }}
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      tabs: [
        {
          label: 'Tab1',
          name: '1',
          content: 'Tab1 content'
        },
        {
          label: 'Tab2',
          name: '2',
          content: 'Tab2 content'
        }
      ],
      tabIndex: 2,
      editableTabsValue: '2'
    }
  },
  methods: {
    handleEdit (targetName, action) {
      console.log(targetName, action, this.tabs.length)
      if (action === 'add') {
        let newTabIndex = (++this.tabIndex) + ''
        this.tabs.push({
          label: 'New Tab',
          name: newTabIndex,
          content: 'New Tab content'
        })
        this.editableTabsValue = newTabIndex
      } else if (action === 'remove') {
        let tabs = this.tabs
        let activeName = this.editableTabsValue
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }
        this.editableTabsValue = activeName
        this.tabs = tabs.filter(tab => tab.name !== targetName)
      }
    }
  }
}
</script>

在这里插入图片描述

8.5 Dialog 对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

将center设置为true即可使标题和底部居中。center仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。

Dialog可以嵌套，外层Dialog嵌套一个内层Dialog, 只需要内层Dialog中使用append-to-body="true"属性即可。

<template>
  <div style="margin: 20px; width: 900px">
    <el-button type="text" @click="isShowDialog = true">打开Dialog</el-button>
    <el-dialog :visible.sync="isShowDialog" :before-close="handleClose" title="提示" width="30%" center>
      <span>这是一段普通文本，也可以是其它el组件(如el-talbe、el-form等)</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowDialog = false">取消</el-button>
        <el-button type="primary" @click="isShowDialog = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      isShowDialog: false
    }
  },
  methods: {
    handleClose (done) {
      console.log(done)
      done()
    }
  }
}
</script>

在这里插入图片描述

8.6 Tooltip 文字提示

常用于展示鼠标 hover 时的提示信息。

使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。如placement=“left-end”，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

<template>
  <div style="margin: 20px;">
    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
      <el-button>上边</el-button>
    </el-tooltip>
  </div>
</template>

在这里插入图片描述

8.7 Popover 弹出框

trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。

对于触发 Popover 的元素，有两种写法：使用 slot=“reference” 的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。

<template>
  <div style="margin: 20px; width: 900px">
    <el-popover placement="top-start" title="标题" width="150px" trigger="hover"
                             content="这是一段内容">
      <el-button slot="reference">hover激活</el-button>
    </el-popover>
    <el-popover ref="popover" placement="right" title="标题" width="150px" trigger="click"
                content="这是一段内容">
    </el-popover>
    <el-button v-popover:popover>click激活</el-button>

    <el-popover placement="top-start" title="标题" width="150px" trigger="click">
      <el-table :data="gridData">
        <el-table-column width="150" property="date" label="日期"></el-table-column>
        <el-table-column width="100" property="name" label="姓名"></el-table-column>
        <el-table-column width="300" property="address" label="地址"></el-table-column>
      </el-table>
      <el-button slot="reference">内容为表格</el-button>
    </el-popover>

    <el-popover v-model="visible" placement="top" width="160">
      <p>确定要删除吗？</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible = false">取消</el-button>
        <el-button size="mini" type="primary" @click="visible = false">确定</el-button>
      </div>
      <el-button slot="reference">删除</el-button>
    </el-popover>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      visible: false
    }
  }
}
</script>

在这里插入图片描述

8.8 Card 卡片

将信息聚合在卡片容器中展示。Card 组件包括header和body部分，header部分需要有显式具名 slot 分发，同时也是可选的。

<template>
  <div style="margin: 20px; width: 260px">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>卡片名称</span>
        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
      </div>
      <div v-for="i in 4" :key="i">
        {{ '列表内容' + i }}
      </div>
    </el-card>

    <br><br>
    <el-card :body-style="{ padding: '0px'}">
      <img src="http://element.eleme.io/static/hamburger.50e4091.png">
      <div style="padding: 14px;">
        <span>好吃的汉堡</span>
        <div>
          <time>2019-01-14 14:33</time>
          <el-button type="text">购买</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

在这里插入图片描述

8.9 Carousel 走马灯

在有限空间内，循环播放同一类型的图片、文字等内容。

默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置trigger属性为click，可以达到点击触发的效果。
indicator-position属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为outside则会显示在外部；设置为none则不会显示指示器。
arrow属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将arrow设置为always，则会一直显示；设置为never，则会一直隐藏。
:interval=“5000” 设置轮播时间间隔
将type属性设置为card即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。

<template>
  <div style="margin: 20px; width: 340px">
    <el-carousel trigger="click" :interval="2000" arrow="always" height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 style="text-align: center">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return { }
  }
}
</script>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

在这里插入图片描述

8.10 Collapse 折叠面板

通过折叠面板收纳内容区域。

可同时展开多个面板，面板之间不影响, 也可以每次只能展开一个面板(通过 accordion 属性来设置是否以手风琴模式显示)。

除了可以通过 title 属性以外，还可以通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。

<template>
  <div style="margin: 20px; width: 340px">
    <el-collapse v-model="activeItemName" @change="handleChange">
      <el-collapse-item title="A" name="1"> AAA </el-collapse-item>
      <el-collapse-item title="B" name="2"> BBB </el-collapse-item>
      <el-collapse-item name="3">
        <template slot="title">
          <i class="header-icon el-icon-info"></i> C
        </template>
        CCC
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      activeItemName: ['1']
    }
  },
  methods: {
    handleChange (val) {
      console.log(val)
    }
  }
}
</script>

在这里插入图片描述

Vue.js + ElementUI 后台管理系统脚手架

两个功能都很相似，不同点在于两者的侧边栏和顶部位置稍微不一样，vue2-manage有更多的示例(如集成了富文本框等)。根据自己的喜好选择。

在这里插入图片描述

Vue.js(十) element-ui PC端组件库

一：简介

二：element-ui 6大组件

三：element-ui 其他

四：Basic基础示例

4.1 Layout 基础布局

4.2 Container 布局容器

4.3 Icon 图标

4.4 Button 按钮

五：Form基础示例

5.1 Radio 单选框

5.2 Checkbox 多选框

5.3 Input 输入框

5.4 InputNumber 计数器

5.5 Select 选择器

5.6 Cascader 级联选择器

5.7 Switch 开关

5.8 Slider 滑块

5.9 TimePicker 时间选择器

5.10 DatePicker 日期选择器

5.10 DateTimePicker 日期时间选择器

5.11 Upload 上传

5.12 Rate 评分

5.13 Transfer 穿梭框

5.14 Form 表单

六：Notice

6.1 Alert 警告

6.2 Loading 加载

6.3 Message 消息提示

6.4 MessageBox 弹框

6.5 Notification 通知

七：其它

7.1 Tag 标签

7.2 Progress 进度条

7.3 Badge 标记

7.4 Steps 步骤条

7.5 Dropdown 下拉菜单

7.6 Breadcrumb 面包屑

7.7 Tree 树形控件

八：其它

8.1 Table 表格

动态列

8.2 Pagination 分页

8.3 NavMenu 导航菜单

8.4 Tabs 标签页

8.5 Dialog 对话框

8.6 Tooltip 文字提示

8.7 Popover 弹出框

8.8 Card 卡片

8.9 Carousel 走马灯

8.10 Collapse 折叠面板

Vue.js + ElementUI 后台管理系统脚手架

猜你喜欢