[Front-end Series] Element-UI Enlightenment

Welcome to my blog, I’m glad to meet you here! I hope you can feel a relaxed and pleasant atmosphere here, where you can not only obtain interesting content and knowledge, but also speak freely and share your thoughts and insights.
img

  • Recommended: kwan’s homepage, keep learning, keep summarizing, make progress together, live and learn
  • Navigation
    • Tan Yue Sword Points to Big Factory Series: Comprehensive summary of core Java technology points, such as collections, jvm, concurrent programming redis, kafka, Spring, microservices, Netty, etc.
    • Common development tool series: List of commonly used development tools, such as IDEA, Mac, Alfred, electerm, Git, typora, apifox, etc.
    • Database series: Detailed summary of commonly used database MySQL technical points, as well as MySQL problems encountered in work, etc.
    • Lazy man’s operation and maintenance series: Summarize useful commands, wouldn’t it be nice to free your hands? It can be completed with one command and never requires two operations
    • Data structure and algorithm series: summarize data structure and algorithm, different types of targeted training, improve programming thinking, and target big manufacturers

I look forward to exploring, learning and growing with you in this small online world. Welcome to subscribe to this column

Blog Directory

    • 1. Introduction
      • 1.Official website
      • 2.What is element?
      • 3.Features
      • 4.Design principles
    • 2. Use
      • 1.Installation
      • 2. Complete introduction
      • 3.Introduce on demand
      • 4. Global configuration
      • 5. Modify font size
      • 6. Refresh function
      • 7. Jump to the specified page
    • 3.el-button
      • 1. Effect
      • 2. Button classification
      • 3. Button style
      • 4.Button state
      • 5.Button grouping
      • 6.Button size
    • 4. Common component addresses
      • 1. Layout container
      • 2.Table
      • 3.input
      • 4.Icon
      • 5. Form
      • 6.Calendar
      • 7.Button
      • 8. Pagination
      • 9.Load
      • 10. Tags
    • 5. Frequently Asked Questions
      • 1.Paging query
      • 2.Copy button
      • 3. Omit after exceeding
      • 4. Refresh the current page
      • 5.Jump
      • 6. 2 buttons on the head
      • 7.Keyboard click event

1. Introduction

1.Official website

Official website address

2.What is element?

Element UI is an open source user interface framework based on Vue.js for building user interfaces for web applications. It provides a series of reusable UI components, including buttons, forms, dialog boxes, menus, tables, charts, etc., to help developers build feature-rich front-end interfaces more easily. Element UI design style is simple and beautiful, easy to customize and use, so it is widely used in many Vue.js projects.

3.Features

Features of Element UI include:

  1. Rich UI components: Element UI provides many common UI components that can be used to build various types of web applications.
  2. Responsive design: Components can automatically adapt to different screen sizes and devices to ensure users have a good experience on different platforms.
  3. Customizability: Developers can customize the components of Element UI according to the needs of the project, including color, style and layout.
  4. Internationalization support: Element UI provides multi-language support and can easily implement international web applications.
  5. Active community and documentation: Element UI has a large user community and rich documentation resources, where developers can get support and share experiences in the community.

The main goal of Element UI is to help developers quickly build beautiful and powerful front-end interfaces, especially for projects based on Vue.js. If you are using Vue.js to build web applications, Element UI can be a useful tool to speed up the development process and improve the user experience.

4. Design principles

Consistency:

  • **Consistent with real life: **Be consistent with the process and logic of real life, and follow the language and concepts used by users;
  • **Consistency in the interface:** All elements and structures need to be consistent, such as: design style, icons and text, position of elements, etc.

Feedback Feedback:

  • **Control feedback: **Users can clearly perceive their operations through interface style and interactive effects;
  • **Page feedback:** After the operation, the current status is clearly displayed through changes in page elements.

Efficiency:

  • **Simplify the process:** Design a simple and intuitive operation process;
  • **Clear and clear:** The language is clearly expressed and the meaning is clear, allowing users to quickly understand and make decisions;
  • **Help users identify: **The interface is simple and straightforward, allowing users to quickly identify rather than recall, reducing the user’s memory burden.

Controllability:

  • **User decision-making:** User operation suggestions or safety tips can be given according to the scenario, but it cannot make decisions on behalf of the user;
  • **Controllable results:** Users can freely perform operations, including undoing, rolling back, and terminating current operations.

2. Use

1.Installation

npm i element-ui -S

CDN:

<!--Introduce styles -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- Import component library -->
<script src="//i2.wp.com/unpkg.com/element-ui/lib/index.js"></script>

2. Complete introduction

Write the following content in main.js:

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import App from "./App.vue";

Vue.use(ElementUI);

new Vue({<!-- -->
  el: "#app",
  render: (h) => h(App),
});

The above code completes the introduction of Element. It should be noted that the style file needs to be imported separately.

3.Introduction on demand

With the help of babel-plugin-component, we can only introduce the required components to reduce the size of the project.

First, install babel-plugin-component:

npm install babel-plugin-component -D

Then, modify .babelrc to:

{<!-- -->
  "presets": [["es2015", {<!-- --> "modules": false }]],
  "plugins": [
    [
      "component",
      {<!-- -->
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

Next, if you only want to introduce some components, such as Button and Select, then you need to write the following content in main.js:

import Vue from "vue";
import {<!-- --> Button, Select } from "element-ui";
import App from "./App.vue";

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* or written as
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({<!-- -->
  el: "#app",
  render: (h) => h(App),
});

4. Global configuration

When introducing Element, you can pass in a global configuration object. This object currently supports the size and zIndex fields. size is used to change the default size of the component, and zIndex sets the initial z-index of the pop-up box (default value: 2000). According to the way of introducing Element, the specific operations are as follows:

Complete introduction of Element:

import Vue from "vue";
import Element from "element-ui";
Vue.use(Element, {<!-- --> size: "small", zIndex: 3000 });

Introduce Element on demand:

import Vue from "vue";
import {<!-- --> Button } from "element-ui";

Vue.prototype.$ELEMENT = {<!-- --> size: "small", zIndex: 3000 };
Vue.use(Button);

According to the above settings, the default size of all components with the size attribute in the project is small’, and the initial z-index of the pop-up box is 3000.

5. Modify font size

To increase the size of the refresh icon available in Element UI, you can add the font-size style in the i tag to set the icon size. For example, setting font-size to 20px doubles the icon size: html In the above code, set font-size to 20px doubles the size of the refresh icon. You can adjust the value of font-size to set the icon size according to actual needs.

6. Refresh function

To add a refresh icon to the el-header component and implement the function of refreshing the current page, you can add an i within the el-header tag label and add a click event to implement the refresh function. Specific steps are as follows:

Add an i tag to the template and add a click event. In the above code, a i tag named Refresh is added, and the click event of the tag is monitored through @click and calls refreshPage method. el-icon-refresh is a refresh icon provided in Element UI.

<el-header style="text-align: right; font-size: 12px">
<el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>New</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
<span>kwan</span>
  <i class="el-icon-refresh" style="margin-left: 15px; cursor: pointer" @click="refreshPage">
  </i>
</el-header>

Define the refreshPage method in methods and use the location.reload() method to refresh the current page. In the above code, the refreshPage method uses the location.reload() method to refresh the current page. In this way, when the user clicks the Refresh icon, the refreshPage method will be triggered, thereby refreshing the current page.

methods: {
    refreshPage()
    {
        location.reload();
    }
}

7. Jump to the specified page

Jump to the specified page and add the appropriate icon

<router-link to="/home/users">
  <el-menu-item index="/users" class="left-aside-item">
    <i class="el-icon-user"></i>
    <span slot="title">User management</span>
  </el-menu-item>
</router-link>

三.el-button

1. Effect

The functions provided by el-button are relatively complete, just use it. Note that it is not recommended to define style yourself to modify the default style, as it can easily lead to inconsistent appearance.

image-20230714153116110

2. Button classification

The classification of el-button buttons is basically distinguished by color. There is also a text button type="text". Since the text button is relatively small, it is more suitable to be used in the operation bar part of each row of the table.

Button categories:
<el-button>Default</el-button>
<el-button type="primary">primary</el-button>
<el-button type="success">success</el-button>
<el-button type="info">info</el-button>
<el-button type="warning">warning</el-button>
<el-button type="danger">danger</el-button>
<el-button type="text">text</el-button>

3. Button style

Element provides simple buttons, rounded buttons, and round buttons. It should be noted that round buttons generally only put one icon in them. The code is as follows:

Button style:
<el-button type="primary" plain>plain button</el-button>
<el-button type="primary" round>Round button</el-button>
<el-button type="primary" circle icon="el-icon-search"></el-button>

4.Button state

The button state is actually a standard function of HTML, which can be disabled through disabled.

Button status:
<el-button type="primary">Normal</el-button>
<el-button type="primary" disabled>Disabled</el-button>

5. Button grouping

Button grouping is very useful. Like common paging buttons, it looks better when divided into a group. This can be achieved by wrapping the buttons with .

Button grouping:
<el-button-group>
  <el-button type="primary" icon="el-icon-arrow-left">Previous page</el-button>
  <el-button type="primary">
    Next page
    <i class="el-icon-arrow-right el-icon--right"></i>
  </el-button>
</el-button-group>

6.Button size

Hungry provides four sizes: default, medium, small, and very small. The code is as follows:

Button size:
<el-button>Default</el-button>
<el-button type="primary" size="medium">medium</el-button>
<el-button type="primary" size="small">small</el-button>
<el-button type="primary" size="mini">mini</el-button>

4. Common component addresses

Component address

1. Layout container

Container address

2.Table

form address

3.input

input address

4.Icon

Icon address

5. Form

form address

6.Calendar

calendar address

7.Button

Button address

8. Pagination

paging address

9. Loading

Load address

10. Tags

Tag address

5. Frequently Asked Questions

1.Page query

<el-main>
  <el-table :data="userlist" v-loading="loading">
    <el-table-column prop="id" label="serial number" width="50"></el-table-column>
    <el-table-column
      prop="question"
      label="problem"
      width="240"
    ></el-table-column>
    <el-table-column prop="response" label="answer"></el-table-column>
    <el-table-column label="Creation time" width="170">
      <template slot-scope="props">
        {<!-- -->{ props.row.createTime | dateFormat }}
      </template>
    </el-table-column>
    <el-table-column prop="Details" label="Details" width="100">
      <template slot-scope="props">
        <a href="#" @click.prevent="gotoDetail(props.row.id)">Details</a>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    class="pagination"
    background
    :page-size="pageSize"
    :total="total"
    @current-change="handleCurrentChange"
  ></el-pagination>
</el-main>

<script>
import axios from "axios";
export default {
  name: "MyChat",

  data() {
    return {
      //User list data
      userlist: [],
      loading: false,
      currentPage: 1,
      pageSize: 5,
      total: 0,
    };
  },

  created() {
    //Call the method to request data
    this.initCartList();
  },

  methods: {
    refreshPage() {
      location.reload();
    },
    gotoDetail(id) {
      this.$router.push("/home/chatinfo/" + id);
    },

    async initCartList() {
      this.loading = true;
      const { data: res } = await axios.get(
        "http://localhost:8888/chatbot/page",
        {
          params: {
            page: this.currentPage,
            pageSize: this.pageSize,
          },
        }
      );
      if (res.code === 200) {
        this.userlist = res.result.records;
        this.total = res.result.total;
      }
      this.loading = false;
    },

    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.initCartList();
    },
  },
};
</script>

2. Copy button

<div class="button-container">
  <el-button @click="copyCode">Copy answer</el-button>
</div>

<script>
//Import axios request library
import axios from "axios";
import ClipboardJS from "clipboard";
export default {
  methods: {
    copyCode() {
      const codeBlock = document.getElementById("td-response");
      const range = document.createRange();
      range.selectNode(codeBlock);
      const selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      document.execCommand("copy");
      selection.removeAllRanges();
      this.$message.success("The code has been copied to the clipboard");
    },
  }
}

3. Omit after exceeding 

<el-table-column prop="response" label="answer" show-overflow-tooltip>
</el-table-column>

4. Refresh the current page

<i class="el-icon-refresh header-button-item" @click="refreshPage"></i>

refreshPage() {<!-- -->
location.reload();
},

5.Jump

//New page opens
window.open('http://qinyingjie.top/')

//The current page is open
window.location.href = "http://qinyingjie.top/";

6. Header 2 buttons

<el-row>
  <el-col :inline="true" :span="24">
    <el-button class="el-button-header" type="success" round @click="myHome">
    \t my home page
    </el-button>
    <el-button class="el-button-header" type="primary" round @click="logout">
   \t\t sign out
    </el-button>
  </el-col>
</el-row>

7. Keyboard click event

<el-input
  clearable
  v-model="formInline.question"
  placeholder="Please enter a question"
  @keydown.enter.native="initCartList"
>
</el-input>

If you find it useful, please give it a like .
My level is limited, if there are any mistakes, you are welcome to comment, criticize and correct me!

If you think this article is helpful to you, please give it a like and save it. Thank you very much!

Stay Hungry Stay Foolish The road is long and difficult, but the journey is about to begin. Let’s work hard together!

img