1. Introduction

ElementUI is a set of desktop component libraries based on VUE2.0. ElementUI provides a wealth of components to help developers quickly build pages with powerful functions and unified styles.

Official website: https://element.eleme.cn/

2. Dropdown drop-down menu

Collapses an action or menu into a dropdown menu.

The trigger mode can be set, click or put the mouse on it to display

You can also set the drop-down list split, etc.

Realize the effect:

Full code:

<el-dropdown>
  <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>螺蛳粉</el-dropdown-item>
    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

Dropdown properties:

3. Calendar Calendar

Set valueto specify the currently displayed month. If value not specified, the current month is displayed. Two-wayvalue binding is supported .v-model

<el-calendar v-model="value">
</el-calendar>

<script>
  export default {
    data() {
      return {
        value: new Date()
      }
    }
  }
</script>

Calendar properties:

4. MessageBox bullet box

From the perspective of the scene, the function of MessageBox is to beautify the system's own alert, confirm and prompt, so it is suitable for displaying relatively simple content. If you need to pop up more complicated content, please use Dialog.

The message prompt can be opened by calling $alertthe method, which simulates the system alertand cannot be closed by pressing ESC or clicking outside the box. This example receives two parameters, messageand title. It is worth mentioning that after the window is closed, it will return an Promiseobject by default for subsequent processing. If you are not sure whether the browser supports it Promise, you can introduce a third-party polyfill yourself or use callbacks for subsequent processing as in this example.

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
    }
  }
</script>

global method

If you fully import Element, it will add the following global methods to Vue.prototype: $msgbox, $alert, $confirm and $prompt. Therefore, it can be called in the way of this page in Vue instance MessageBox. The calling parameters are:

$msgbox(options)
$alert(message, title, options)or$alert(message, options)
$confirm(message, title, options)or$confirm(message, options)
$prompt(message, title, options)or$prompt(message, options)

single quote

If imported separately MessageBox:

import { MessageBox } from 'element-ui';

Then the calling methods corresponding to the above four global methods are: MessageBox, MessageBox.alert, MessageBox.confirm and MessageBox.prompt, and the calling parameters are the same as the global methods.

Element-ui advanced training