💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航

檀越剑指大厂系列:全面总结 java 核心技术点,如集合,jvm,并发编程 redis,kafka,Spring,微服务,Netty 等常用开发工具系列:罗列常用的开发工具,如 IDEA,Mac,Alfred,electerm,Git,typora,apifox 等数据库系列:详细总结了常用数据库 mysql 技术点,以及工作中遇到的 mysql 问题等懒人运维系列:总结好用的命令,解放双手不香吗?能用一个命令完成绝不用两个操作数据结构与算法系列:总结数据结构和算法,不同类型针对性训练,提升编程思维,剑指大厂

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

博客目录

一.介绍1.官网2.什么是 element?3.特点4.设计原则

二.使用1.安装2.完整引入3.按需引入4.全局配置5.修改字体大小6.刷新功能7.跳转指定页面

三.el-button1.效果2.按钮分类3.按钮样式4.按钮状态5.按钮分组6.按钮尺寸

四.常用组件地址1.布局容器2.表格3.input4.图标5.表单6.日历7.按钮8.分页9.加载10.标签

五.常见问题1.分页查询2.复制按钮3.超过后省略4.刷新当前页面5.跳转6.头部 2 个按钮7.键盘点击事件

一.介绍

1.官网

官网地址

2.什么是 element?

Element UI 是一个基于 Vue.js 的开源用户界面框架，用于构建 Web 应用程序的用户界面。它提供了一系列的可重用的 UI 组件，包括按钮、表单、对话框、菜单、表格、图表等，以帮助开发者更轻松地构建功能丰富的前端界面。Element UI 设计风格简洁美观，易于定制和使用，因此它在许多 Vue.js 项目中被广泛使用。

3.特点

Element UI 的特点包括：

丰富的 UI 组件：Element UI 提供了许多常见的 UI 组件，可以用于构建各种类型的 Web 应用程序。响应式设计：组件能够根据不同的屏幕尺寸和设备自动适应，以确保用户在不同平台上都有良好的体验。可定制性：开发者可以根据项目的需求对 Element UI 的组件进行自定义，包括颜色、样式和布局。国际化支持：Element UI 提供了多语言支持，可以轻松实现国际化的 Web 应用。活跃的社区和文档：Element UI 拥有庞大的用户社区和丰富的文档资源，开发者可以在社区中获得支持和分享经验。

Element UI 的主要目标是帮助开发者快速构建漂亮和功能强大的前端界面，特别适用于基于 Vue.js 的项目。如果您正在使用 Vue.js 来构建 Web 应用程序，Element UI 可能是一个有用的工具，可以加速开发过程并提升用户体验。

4.设计原则

一致性 Consistency:

**与现实生活一致：**与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；**在界面中一致：**所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback:

**控制反馈：**通过界面样式和交互动效让用户可以清晰的感知自己的操作；**页面反馈：**操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency:

**简化流程：**设计简洁直观的操作流程；**清晰明确：**语言表达清晰且表意明确，让用户快速理解进而作出决策；**帮助用户识别：**界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability:

**用户决策：**根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；**结果可控：**用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

二.使用

1.安装

npm i element-ui -S

CDN:

<!-- 引入样式 -->

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入组件库 -->

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2.完整引入

在 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),

});

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

3.按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{

"presets": [["es2015", { "modules": false }]],

"plugins": [

[

"component",

{

"libraryName": "element-ui",

"styleLibraryName": "theme-chalk"

}

]

]

}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 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);

/* 或写为

* Vue.use(Button)

* Vue.use(Select)

*/

new Vue({

el: "#app",

render: (h) => h(App),

});

4.全局配置

在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：

完整引入 Element：

import Vue from "vue";

import Element from "element-ui";

Vue.use(Element, { size: "small", zIndex: 3000 });

按需引入 Element：

import Vue from "vue";

import { Button } from "element-ui";

Vue.prototype.$ELEMENT = { size: "small", zIndex: 3000 };

Vue.use(Button);

按照以上设置，项目中所有拥有 size 属性的组件的默认尺寸均为 ‘small’，弹框的初始 z-index 为 3000。

5.修改字体大小

要增大 Element UI 中提供的刷新图标，可以在 i 标签中添加 font-size 样式来设置图标大小。例如，将 font-size 设置为 20px 可以将图标大小增大为原来的两倍： html <i class="el-icon-refresh" style="margin-right: 15px; font-size: 20px" @click="refreshPage"></i> 在上述代码中，将 font-size 设置为 20px 可以将刷新图标大小增大为原来的两倍。您可以根据实际需要调整 font-size 的值来设置图标大小。

6.刷新功能

要在 el-header 组件中添加一个刷新图标并实现刷新当前页面的功能，可以在 el-header 标签内添加一个 i 标签，并添加一个点击事件来实现刷新功能。具体步骤如下：

在模板中添加一个 i 标签，并添加一个点击事件。 在上述代码中，添加了一个名为 刷新 的 i 标签，并通过 @click 监听了该标签的点击事件，并调用了 refreshPage 方法。el-icon-refresh 是一个 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>新增</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>

在 methods 中定义 refreshPage 方法，使用 location.reload() 方法来刷新当前页面。 在上述代码中，refreshPage 方法使用 location.reload() 方法来刷新当前页面。 这样，当用户点击 刷新 图标时，就会触发 refreshPage 方法，从而刷新当前页面。

methods: {

refreshPage()

{

location.reload();

}

}

7.跳转指定页面

跳转指定页面并添加合适的图标

<router-link to="/home/users">

<el-menu-item index="/users" class="left-aside-item">

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

<span slot="title">用户管理</span>

</el-menu-item>

</router-link>

三.el-button

1.效果

el-button 提供的功能已经比较完善了，拿来即可即可。注意不推荐自己定义 style 来修改默认样式，容易导致外观不统一。

2.按钮分类

el-button 按钮的分类基本是靠颜色区分的，另外还有一种文本按钮type="text"，文本按钮由于比较小，比较适合用于表格每行的操作栏部分。

按钮分类：

<el-button>默认</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.按钮样式

Element 提供了朴素按钮、圆角按钮、圆形按钮，需要注意的是圆形按钮一般只放一个图标进去，代码如下：

按钮样式：

<el-button type="primary" plain>朴素按钮</el-button>

<el-button type="primary" round>圆角按钮</el-button>

<el-button type="primary" circle icon="el-icon-search"></el-button>

4.按钮状态

按钮状态其实就是 HTML 标准的功能，通过 disabled 实现禁用即可。

按钮状态：

<el-button type="primary">正常</el-button>

<el-button type="primary" disabled>禁用</el-button>

5.按钮分组

按钮分组很好用，像常见的分页按钮，分成一组的话更加好看，通过<el-button-group>将按钮包裹起来，即可实现。

按钮分组：

<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>

6.按钮尺寸

饿了提供了默认、中、小、很小四种尺寸，代码如下：

按钮的尺寸：

<el-button>默认</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>

四.常用组件地址

组件地址

1.布局容器

容器地址

2.表格

表格地址

3.input

input 地址

4.图标

图标地址

5.表单

表单地址

6.日历

日历地址

7.按钮

按钮地址

8.分页

分页地址

9.加载

加载地址

10.标签

标签地址

五.常见问题

1.分页查询

<el-main>

<el-table :data="userlist" v-loading="loading">

<el-table-column prop="id" label="序号" width="50"></el-table-column>

<el-table-column

prop="question"

label="问题"

width="240"

></el-table-column>

<el-table-column prop="response" label="答案"></el-table-column>

<el-table-column label="创建时间" width="170">

<template slot-scope="props">

{ { props.row.createTime | dateFormat }}

</template>

</el-table-column>

<el-table-column prop="详情" label="详情" width="100">

<template slot-scope="props">

<a href="#" @click.prevent="gotoDetail(props.row.id)">详情</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 {

// 用户列表数据

userlist: [],

loading: false,

currentPage: 1,

pageSize: 5,

total: 0,

};

},

created() {

// 调用请求数据的方法

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.复制按钮

<div class="button-container">

<el-button @click="copyCode">复制回答</el-button>

</div>

<script>

// 导入 axios 请求库

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("代码已复制到剪贴板");

},

}

}

3.超过后省略

<el-table-column prop="response" label="答案" show-overflow-tooltip>

</el-table-column>

4.刷新当前页面

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

refreshPage() {

location.reload();

},

5.跳转

// 新页面打开

window.open('http://qinyingjie.top/')

// 当前页面打开

window.location.href = "http://qinyingjie.top/";

6.头部 2 个按钮

<el-row>

<el-col :inline="true" :span="24">

<el-button class="el-button-header" type="success" round @click="myHome">

我的主页

</el-button>

<el-button class="el-button-header" type="primary" round @click="logout">

退出登录

</el-button>

</el-col>

</el-row>

7.键盘点击事件

<el-input

clearable

v-model="formInline.question"

placeholder="请输入问题"

@keydown.enter.native="initCartList"

>

</el-input>

觉得有用的话点个赞 👍🏻 呗。

❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙