Vue2 开发/学习 记录
- 生命周期
Vue2 生命周期:
即Vue实例在创建到销毁的一系列过程
1.创建 -> 2.初始化数据 -> 3.编译template -> 4.挂载DOM -> 5.渲染 -> 6.更新渲染 -> 7.卸载
常见的生命周期:
beforeCreate: 实例创建之初
created: 组件已经创建完成
beforeMounte: 组件挂载之前
mouned: 组件挂载完成
beforeUpdate: 数据发生变化,更新之前
updated: 数据发生变化更新后
beforeDestory: 实例销毁前
detoryed: 销毁后
activated: keep-alive组件激活
deactivated: keep-alive组件停用
errorCaptured: 捕获实例的错误
-
Bug记录
el-form 表单中数据有了但是校验还在?
原因是: el-form model 绑定的数据嵌套多层, 而 el-form-item 的 prop 只绑定了最里层, 应该把级联的嵌套都绑定上 -
el-table 在表头添加提示信息
<el-table-column
prop="ownTimeFlag"
label="按占有时长计费"
show-overflow-tooltip>
<template slot-scope="{}" slot="header">
<span>是否按占有时长计费</span>
<el-tooltip class="item" effect="dark" placement="top">
<i class="el-icon-question" style="font-size: 14px; vertical-align: middle;"></i>
<div slot="content">
<p>是否按占有时长计费(后付费生效)：</p>
<p>选择是：计量数据大于0，将会忽略计量数据与公式的计算，直接计算整个时段(计量周期)费用。如：按日月结选择是，用1秒也按1天计费。</p>
<p>选择否：计量数据与配置的公式进行计算。</p>
</div>
</el-tooltip>
</template>
<template slot-scope="scope">
{
{
scope.row.ownTimeFlag ? '是' : '否'}}
</template>
</el-table-column>
- 一个页面涉及到两个或多个表单，校验成功后才调用提交接口
const form1 = new Promise((resolve, reject) => {
this.$refs["formRef1"].validate((valid) => {
if (!valid) {
this.$message.warning("表单1中信息填写不完整");
} else {
resolve();
}
});
});
const form2 = new Promise((resolve, reject) => {
this.$refs["formRef2"].validate((valid) => {
if (!valid) {
this.$message.warning("表单2中信息填写不完整");
} else {
resolve();
}
});
});
Promise.all([form1, form2]]).then(() => {
// ...
})
// 另一种需要调完某个接口之后再调用另一个接口
let p1 = new Promise((resolve, reject) => {
let params = {
};
update(params).then((res) => {
if (res.code == "200") {
resolve();
} else {
reject();
}
});
});
p1.then(() => {
// ...
});
-
Bug记录
广西智慧仓储项目,部署之后,所有样式都失效了
原因很可能是 nginx.conf 文件配置有问题,导致css未生效. -
Bug记录
父组件传值给子组件,子组件始终展示的是初始值
参考了: https://blog.csdn.net/qq_37604998/article/details/119652760
原因: 父子组件加载渲染过程：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件在父组件挂载完成的时候已经渲染出来了.
解决方法:
(1) 用监听的方式来写.
(2) 父组件中使用v-if来控制子组件是否加载.
(3) 本次解决方法采用的,直接通过方法传值,再在子组件中进行赋值.
// 父组件 中
<detail-dialog ref="detailRef"></detail-dialog>
clickDetail(row) {
this.$refs.detailRef.openDialog(row);
},
// 子组件 中
openDialog(row) {
this.jhDataType = row.jhDataType;
this.dialogVisible = true;
},
- Bug记录
在 display: flex; 样式下显示横向滚动轴
父元素: {
display: flex;
overflow-x: auto;
}
子元素: {
flex-shrink: 0;
width: (给一个宽度);
}
- 手动实现防抖节流
防抖: 如果重复的事件不断涌入，就一直不执行逻辑，直到一个timeout之后还没有事件触发；
节流: 在一段timeout时间内只触发一次，直到下一次timeout时间到达，则重新计算。
const box = document.getElementById('box');
function move(e) {
box.innerHTML = `${
e.offsetX}, ${
e.offsetY}`;
console.log('1')
}
function debounce (func, delay) {
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, arguments), delay);
}
}
function throttle (func, delay) {
let lock = false;
return function () {
if (lock) return;
lock = true;
setTimeout(() => {
func.apply(this, arguments);
lock = false;
}, delay);
}
}
box.onmousemove = throttle(move, 1000);
box.onmousemove = debounce(move, 1000);
- 页面滚动加载
// html代码
<duties-card-list class="wrap" id="btn" :dataList="dataList" @getList="getList(1)">
</duties-card-list>
<!-- 需要加上id=“btn”，方便后面获取元素高度 -->
// js代码
mounted() {
// 监听滚动事件，然后用handleScroll这个方法进行相应的处理
window.addEventListener('scroll', this.handleScroll, true)
},
// 离开这个页面销毁滚动条事件，不然会给每一个页面都触发
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll, true)
},
methods(){
//滚动事件-触底
handleScroll() {
//1.获取滚动区域元素
let btn = document.getElementById('btn')
if (btn) {
//2.获取元素高度
let height = btn.offsetHeight
//3.获取滚动区域到头部的距离
let top = btn.scrollTop || document.documentElement.scrollTop
//4.获取滚动条高度
let scrollHeight = btn.scrollHeight
//5.滚动条到底部的条件
if (top + height == scrollHeight) {
// 滚动区域到头部的距离 + 屏幕高度 = 可滚动的总高度 //触底时自动加载
this.loadMore()
}
}
},
//滚动刷新
loadMore() {
//Math.ceil()向上取整，小数部分直接舍去，并向正数部分进1
if (Math.ceil(this.page.total / this.page.pageSize) > this.page.currentPage) {
this.page.currentPage++
this.getList()
}
},
}
-
Vue项目 引入LuckySheet
参考链接 -
Bug记录
[Vue warn]: Injection “elForm” not found
错误原因: 在使用el-form-item标签时，外层没有加el-form,导致出现报错 -
Bug记录
row is required when get row identity
参考链接 -
Bug记录
在element ui的表格中每一行数据都有删除当前行数据的操作，在点击删除按钮后要出现气泡弹框提示，但是当点击删除后发现每一行的气泡弹框都弹出来了
解决方法: 给el-popover添加ref属性，值可以是数据的唯一标识，比如id -
Bug记录
el-table-column标签内使用v-if判断其显示，出现列错位和列元素渲染异常的问题
分析原因：vue的 风格指南 中介绍，默认情况下，Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时，会修补已存在的元素，而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同，则会导致元素间相互影响，不能正常渲染。
解决方案： 用 key 管理可复用的元素
添加一个具有唯一值的 key attribute，表明该元素是完全独立的，不要复用它 。 -
Bug记录
解决element UI中el_table的合计栏在滚动条下方问题
<style>
.itemTrading .el-table{
overflow: auto;
}
.itemTrading .el-table__body-wrapper,
.itemTrading .el-table__header-wrapper,
.itemTrading .el-table__footer-wrapper {
overflow: visible;
}
.itemTrading .el-table::after {
position: relative !important;
}
//这里根据自己的项目查看是否需要添加。
//我的页面样式需要将此处的滚动条也进行隐藏。
.body-theme-grenn .el-table--scrollable-x .el-table__body-wrapper{
overflow: visible;
}
</style>
- Bug记录
Unexpected reserved word ‘await‘
// 把
async handleDelete() {
let folderFilesIds = [1, 2]
this.$confirm('此操作将永久删除文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
await this.confirmHandleFiles(folderFilesIds)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 改成以下写法
handleDelete() {
let folderFilesIds = [1, 2]
this.$confirm('此操作将永久删除文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
await this.confirmHandleFiles(folderFilesIds)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
- 解决el-select组件自动清除数据空格的问题
有时候后端返回的数据是有空格的,但是el-select组件渲染的时候给清除了
解决方法一(推荐)：
给下拉框渲染出的span标签添加 white-space: pre 样式，不要把该样式加在原来样式里面，可能会被覆盖掉，最好写在最外层
解决办法二(不太推荐):
使用v-html来解析数据
<el-select v-model="selForm.ydlbValue" clearable placeholder="请选择">
<el-option
v-for="item in ydlb"
:key="item.ydlbbm"
:label="item.ydlbmc"
v-html="item.ydlbmc3"
:value="item.ydlbbm">
</el-option>
</el-select>
idjYdlb_selectYdlb(this.jgbm).then(res=>{
for (var i in res.content) {
res.content[i].ydlbmc3=res.content[i].ydlbmc.replace(' ',' ')
}
})
-
Bug记录
Uncaught TypeError: Cannot read properties of undefined (reading ‘install’)
解决办法：
出现该情况的原因是vue-router安装的版本太高，一般vue2的项目对应的版本是vue-router@3版本
① 在控制台输入： cnpm install --save [email protected] 重新安装vue-router即可解决
如果没有安装cnpm命令的，可以先安装：cnpm install
② 如果安装了cnpm 命令，则在控制台输入： cnpm install --save [email protected] 重新安装vue-router即可解决
③ 没有cnpm命令 也可 则在控制台输入： npm install --save [email protected] 重新安装vue-router即可解决 -
Bug记录
Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag.
修改eslint配置文件
// 将
"parser": "babel-eslint",
// 改为如下
"parserOptions": {
"parser": "babel-eslint"
},
- Bug记录
ESLint 报 ‘require‘ is not defined no-undef
需要修改下 eslint 的配置，一般 eslint 配置文件为 .eslintrc.js
// .eslintrc.js
module.exports = {
env: {
node: true // 只需将该项设置为 true 即可
},
//此处省略其他配置
};
- Bug记录
error Component name “index” should always be multi-word vue/multi-word-component-names
原因是 eslint-plugin-vue 版本更新了，相较之前版本，@8 版本中新增了不少规则，第一条就是 ‘vue/multi-word-component-names’: ‘error’, 要求组件名称以驼峰格式命名，所以 index.vue 会报错。
在 .eslintrc.js 文件中关闭命名规则
// .eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended",
"plugin:prettier/recommended",
],
parserOptions