简介
记录我从自学做毕业设计到工作时候所遇到的不懂点，使用vue2+elemenent-ui过程中的一些独特的记录。因为我主要是面向后端，从毕业前自己制作毕业设计到工作，对于vue都是直接上手学习，不懂百度的那种，个人觉得这样效果还是不错，各位读者如果是初步踏入，可以将自己的不懂点逐一记录。
el-card样式修改
在element-ui中，el-card会自带padding属性，如果不是很喜欢，或者需要自定义，可以使用:body-style进行修改。一下提供一个例子进行将padding设置为0
<el-card:body-style="{padding:'0'}"style=" min-height: 80vh;"> .... </el-card>
鼠标划过颜色变化
这个效果是当需要指针指向的时候会有颜色的变化，实际上就是一个默认的鼠标事件onmouseover/onmouseout，样例如下：
<buttonclass="z-button"onmouseover="this.style.color='#409EFF'"onmouseout="this.style.color='#000000'"@click="addMajor"> 添加专业 </button>
不同屏幕大小，比例缩放
这个应该是叫响应式缩放，通过浏览器的缩放，将整体进行缩放。一般会导致缩放不规则，导致在不同的分辨率显示器上会有不同的效果，这个做法可能有很多个，但是，我这里就做一种我之前做毕设前台界面的做法。
将长度定死，然后设置margin: 0 auto ，因为我不是专门前端的，可能真正的决策方案并不是我这样的，毕竟当时我也是在做尝试。
<el-rowstyle="margin: 0 auto; width: 1280px;":gutter="20">//..... </el-row>
效果会跟如下一致：
vue组件的富文本
对于富文本有许多种，这里使用vue组件的富文本
安装mavon-editor
cnpm install mavon-editor --save
注册
需要在main.js中去进行全局注册
// 全局注册 import Vue from 'vue' import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' // use Vue.use(mavonEditor)
解析md文档
安装两个组件就可以
# 用于解析md文档 cnpm install markdown-it --save # md样式 cnpm install github-markdown-css
el-table 表头居中
关于el-table表头居中，可以直接使用:header-cell-style="{'text-align':'center'}"进行居中
<el-table:header-cell-style="{'text-align':'center'}"size="small":data="tableData"borderstyle="width: 100%"> // .... </el-table>
如果是在行中设置居中就会全部都居中
<el-table-columntype="index"align="center"//居中label="序号"width="60px"></el-table-column>
渐变背景
关于背景渐变，我是从b站中看到的，原理就是一个普通的css样式，并没有什么特别。
background-image: linear-gradient(to bottom right, #FC466B, #3F5EFB);
el中切割线的样式修改
在使用element-ui的<el-divider/>，他本身会有一些默认设置的样式，可以通过设置.el-divider这个css属性。
.el-divider { height: 180px; margin: 0 0 0 100%; }
Vue路由跳转传递对象参数
关于vue路由跳转传递参数有许多种情况。这个网上有许多的教程，我就不只是记录我使用的方式，更多可以看推荐博客：https://blog.csdn.net/qq_38244874/article/details/110390047
Vue深度选择器修改样式
通过/deep/ 来深度修改，在前面加个class，在需要改的标签中引用class，就可以对指定的进行修改，如下所示：
.newDialog /deep/ .el-dialog__header { padding: 1vh 1vw 0 1vw; } .newDialog /deep/ .el-dialog__body { padding: 1vh 1vw; }
vue 生命周期 beforeDestroy 和 destroyed 调用
- 情境一：离开当前路由，会直接调用；
当前路由不使用 缓存，离开当前路由会直接调用 beforeDestroy 和 destroyed 销毁
- 情景二：离开当前路由，不会直接调用，需要程序控制调用；
当前路由使用 缓存，离开当前路由不会直接调用 beforeDestroy 和 destroyed 销毁，需要使用路由钩子函数主动的调用
beforeRouteLeave(to, from, next) { this.$destroy(); next(); }
定时任务
关于定时任务也是十分简单的
创建定时任务
this.timer = setInterval(() => { // 定时刷新设备的状态信息 console.log('定时任务启动') }, 5000)
销毁定时任务
beforeDestroy() { // js提供的clearInterval方法用来清除定时器 console.log('定时任务销毁') clearInterval(this.timer) }
单独校验
例子如下：
<el-table-columnlabel="编码"prop="code"min-width="120"><templateslot-scope="scope"><el-form-item:prop="'gridFieldData.'+ scope.$index + '.code'":rules="[{ required: true, message: '编码不能为空!', trigger: 'blur' }]"><el-inputv-model="scope.row.code"/></el-form-item></template></el-table-column>
async与await的关系
在使用vue中如果返回的值是一个Promise对象，那我们就可以用async和await简化这段代码
async是作为一个关键词放在函数的最前面，而await是放在async函数里面的，async表示这个函数是异步的，await是等待的意思，它的后面我们一般都放返回值是一个Promise对象的函数。
使用async函数返回的一定是个Promise对象，而await的作用就是等待这个对象执行完毕，并且接收到返回值的时候才会继续执行下一步，在此之前就像暂停了一样，没有接收到返回值是不会进行下一步的，但是它在等待的时候并没有妨碍async函数外面的代码执行。
事件的监听与销毁
在生命周期调用removeEventListener方法即可
mounted() { window.addEventListener('scroll', this.handleScroll) }, beforeDestroy() { window.removeEventListener('scroll', this.handleScroll) },
文本过长自动换行显示
添加css样式即可
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
.text-wrapper { word-break: break-all; word-wrap: break-word; }
👍创作不易，如有错误请指正，感谢观看！记得点赞哦！👍
