欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。
- 推荐: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-button
- 1.效果
- 2.按钮分类
- 3.按钮样式
- 4.按钮状态
- 5.按钮分组
- 6.按钮尺寸
- 四.常用组件地址
- 1.布局容器
- 2.表格
- 3.input
- 4.图标
- 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:
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
在上述代码中,将 font-size
设置为 20px
可以将刷新图标大小增大为原来的两倍。您可以根据实际需要调整 font-size
的值来设置图标大小。
6.刷新功能
要在 el-header
组件中添加一个刷新图标并实现刷新当前页面的功能,可以在 el-header
标签内添加一个 i
标签,并添加一个点击事件来实现刷新功能。具体步骤如下:
在模板中添加一个 i
标签,并添加一个点击事件。 在上述代码中,添加了一个名为 刷新
的 i
标签,并通过 @click
监听了该标签的点击事件,并调用了 refreshPage
方法。el-icon-refresh
是一个 Element UI 中提供的刷新图标。
新增kwan
在 methods
中定义 refreshPage
方法,使用 location.reload()
方法来刷新当前页面。 在上述代码中,refreshPage
方法使用 location.reload()
方法来刷新当前页面。 这样,当用户点击 刷新
图标时,就会触发 refreshPage
方法,从而刷新当前页面。
methods: {refreshPage(){location.reload();}}
7.跳转指定页面
跳转指定页面并添加合适的图标
用户管理
三.el-button
1.效果
el-button 提供的功能已经比较完善了,拿来即可即可。注意不推荐自己定义 style 来修改默认样式,容易导致外观不统一。
2.按钮分类
el-button 按钮的分类基本是靠颜色区分的,另外还有一种文本按钮type="text"
,文本按钮由于比较小,比较适合用于表格每行的操作栏部分。
按钮分类:默认primarysuccessinfowarningdangertext
3.按钮样式
Element 提供了朴素按钮、圆角按钮、圆形按钮,需要注意的是圆形按钮一般只放一个图标进去,代码如下:
按钮样式:朴素按钮圆角按钮
4.按钮状态
按钮状态其实就是 HTML 标准的功能,通过 disabled 实现禁用即可。
按钮状态:正常禁用
5.按钮分组
按钮分组很好用,像常见的分页按钮,分成一组的话更加好看,通过将按钮包裹起来,即可实现。
按钮分组:上一页下一页
6.按钮尺寸
饿了提供了默认、中、小、很小四种尺寸,代码如下:
按钮的尺寸:默认mediumsmallmini
四.常用组件地址
组件地址
1.布局容器
容器地址
2.表格
表格地址
3.input
input 地址
4.图标
图标地址
5.表单
表单地址
6.日历
日历地址
7.按钮
按钮地址
8.分页
分页地址
9.加载
加载地址
10.标签
标签地址
五.常见问题
1.分页查询
{{ props.row.createTime | dateFormat }}详情
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();},},};
2.复制按钮
复制回答// 导入 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.超过后省略
4.刷新当前页面
refreshPage() {location.reload();},
5.跳转
// 新页面打开window.open('http://qinyingjie.top/')// 当前页面打开window.location.href = "http://qinyingjie.top/";
6.头部 2 个按钮
我的主页退出登录
7.键盘点击事件
觉得有用的话点个赞
呗。
❤️❤️❤️本人水平有限,如有纰漏,欢迎各位大佬评论批评指正!如果觉得这篇文对你有帮助的话,也请给个点赞、收藏下吧,非常感谢!
Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧!