1.el-input和el-select的长度不同
<el-select<e> v-model="form.project" clearable placeholder="请选择" style="width: 100%"/>
在el-select中加入style="width: 100%"即可
2.在js文件中的方法使用不了this.#message
在js文件中：
export function checkRes(data) {
if (data.respMsg === '交易成功') {
this.$message({
message: '操作成功！'，
type: 'success'
})
}
}
在.vue页面调用：
updateUser(this.from).then(response => {
checkRes(response);
}
但是页面报错：Cannot read property ‘$message’ of undefined
错误原因：
- 因为在调用方法后，失去了this的指向，所以报错
解决方法：
- 使用call，调用方法的语句改为：
checkRes.call(this, response);
- 将this作为参数传入：
js中的方法改为：
checkRes(this, data)
.vue页面中的方法调用：
checkRes(this, response)
3.treeselect 组件出现unknow如何解决
将treeselect中的v-model属性初始值设置为null或者undefined
4.如何遍历带有children的数组（遍历树形机构的数组）
function arrayTraverse(data, id){
var result = null;
if(!data){
// return; 中断执行
return;
}
for(let i in data){
// 已经找到了属性值所在的对象就终止循环,以免后面的循环覆盖result,导致出错
if(result !== null){
break;
}
var item = data[i];
if(item.id == id){
result = item;
break;
}else if(item.children){
result = arrayTraverse(item.children, id);
}
}
return result;
}
5.el-dialog的关闭事件设为true时，如何关闭弹窗
今天需求要求我做一个用户首次登录后强制修改密码的功能，
我想了一下，是否首次登录不好判断，就判断用户的密码是否等于默认密码，等于就出现弹窗让其改密码，弹窗使用的是el-dialog组件。
但是组件右上角有一个X的关闭按钮，于是我在关闭事件cancel中，将弹窗设置为true，令其不能关闭，达到了强制修改密码的结果。
但是在调用完接口修改密码成功后，用this.dialogViseble=false语句不能关闭弹窗
<el-dialog<e>
title="提示"//弹窗标题
:visible.sync="dialogVisible"//弹窗的名称
width="30%"
@close="cancel"// 关闭事件
:close-on-click-modal="false"// 为true时，点击对话框外的区域，可关闭对话框
/>
// 表示点击关闭的 X 无法关闭弹窗
cancel() {
this.dialogVisible = true;// true时,关闭事件无法关闭弹窗
}
在cancel事件的弹窗始终设置为true时，使用
this.dialogVisible = false;// false时关闭弹窗
始终无法关闭弹窗
解决方法：
设置一个可动态修改的值：lock:false
cancel() {
this.dialogVisible = this.lock;// false时关闭弹窗
}
需要的时候弹窗不能关闭的时候，令 this.lock = true
可以关闭的时候：令this.lock = false
6.关于邮箱长度的设置
做项目的时候，测试要我给邮箱添加一个长度限制，根据以往的经历，我以为在后面加一个{0,30}就可以了，结果发现，我太天真了。
parttem: /^(?=\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$).{0,30}$/
结果没有想象中的限制长度，然后去百度了很久，没有什么可以既限制输入格式，又控制长度的表达式
解决方法：
后面用了一个笨办法：直接通过.length来控制长度。
if(this.form.email.length > 30){
this.$alter('长度不能超过30', '提示', {
confirmButtonText: '确定'
})
} else {
// 长度符合，进行下一步操作
}
只要长度不符合要求，就会一直弹出提示。
7.不能直接使用hasOwnProperty这个方法
需求：想通过hasOwnProperty判断对象中是否含有某个属性
handleEdit(todo) {
if (todo.hasOwnProperty("isEdit")) {
console.log("对象中含有isEdit这个属性");
} else {
console.log("对象中没有isEdit这个属性");
}
}
但是，这个写，hasOwnProperty会报错：
Do not access Object.prototype method ‘hasOwnProperty’ from target object
让你不要访问对象原型上的方法
解决方法：
将todo.hasOwnProperty('isEdit')改为Object.property.hasOwnProperty.call(todo,'isEdit')
8.VScode不能格式化，以及插件的安装
- 因为在内网开发，所以VScode的插件不能直接下载，需要通过别的方法进行安装
解决方法：
在自用的电脑上用vscode,将插件下载好,下载好的插件（没有改变路径的话）默认存放在以下路径：
C:\Users\自己使用的用户名.vscode\extensions
将里面的文件压缩打包，直接放到内网的以上路径中，重启VScode即可（有可能一次不行，需要多重启几次）
但是也存在问题，如果内网中的VScode版本太低，有部分插件不能使用，需要到官网下载低版本的插件，这个百度可以找到很多，我就不赘述了
- 开发中也遇到了VScode不能格式化的情况，最后发现是因为代码存在编写错误或者格式错误（少了标点符号等等），所以不能格式化。
9.将html文本转换为纯文本
解决方法：使用replace方法加正则表达式，将html文本中的标签去掉
let str = '<p><span class="ql-size-small">你好呀，</span>见到你很高兴！！</p>你呢？'
str.replace(/<.+?>/g,'')//将html文本转换为纯文本
str.replace(/ /g,' ')//将html文本中的空格转为纯文本空格
10.系统管理网站登录失败
具体详情：
（1）只有IE浏览器可以成功登录，谷歌和火狐登录失败，报错network Error
（2）后端没有报错，并且成功返回所需信息
（3）前端在登录账号，登录密码，验证码输入错误时，可以走resolve()并且报相应的错误提示，但是全部输对时，直接进入reject()
解决方法：
在后端将json解释器里的response关闭
response.getWriter().close();
11.顶部标题遮住部分内容问题
在开发过程中，碰到一个兼容性问题，iPhoneXsMax的标题遮住了部分内容，但是其他机型没有出现这种问题。搞了一晚上加一上午，最终定位到问题所在
在app.vue文件中的html样式中，将下列代码注释即可：
overflow:hidden/*注释即可*/
12.从自己包的H5跳到他人包的H5，再返回出现加载卡死的问题
如果一个APP分有多个模块，打包也是分成多个包，那么，从自己包的H5页面跳到别的包的H5页面，我们不能通过路由的方式跳转，需要通过WebView的方式跳转
这两种方式跳转的区别：
路由跳转：如果没有使用< keep alive>缓存组件，每次跳转之后，原来的页面会自动销毁
WebView跳转：页面跳转之后，旧的页面不会消失，新的页面会覆盖在旧页面之上
当进行WebView跳转之后，返回原来页面会出现卡死或者加载很久的情况
解决方法：
在挂载时加入一个监听属性
document.addEventListener('resume',()=>{
if(this.flag){
this.flag = false;
this.fun() // 调用接口，刷新数据
}
}
this.flag = true;
// 在这里进行跳包
这样在跳包之后，返回页面会自动调用接口，加载数据
13.根据枚举值转译为对应的值
关于枚举值转译为对应值的方法，之前一直使用的是if()else if() 的方法，很low。
后来经同事提醒，可以使用数组的方式进行转译
14.jujustify-content: space-evenly不兼容低版本的IOS系统
在做项目时，发现jujustify-content: space-evenly不兼容低版本的IOS系统，上网查找解决方法，发现基本都是这种写法：
但是尝试之后发现并没有作用（可能是我写错了）
解决方法：
上面的方法解决思路是正确的，不说那是 scss 的写法，我用的是下面的写法
.flex{
justify-content: space-between;
}
.flex:before{
content:' ';
display: block;
}
.flex:after{
content:' ';
display: block;
}
原理：
假设有3个元素, space-evenly是将每个剩余空间平均分割,这样就有4个相同宽度的间隔空间,间隔空间数量 = 3 + 1;
space-between是将最左边和最右边的元素分别占据最左边和最右边的空间,然后剩余空间平均分割,这样就有2个相同宽度的间隔空间, 间隔空间数量 = 3 - 1;
:before{} 和 :after{} 是在选中的元素前后加上一个<span>内容</span>
利用这种伪元素方式,在第一个元素前面和最后一个元素后面分别加上一个没有内容的元素,这样就是3+2=5个元素, 相同宽度间隔空间数量为 5-1 ,因为左右两边的元素不占据空间,所以,变相的实现了space-evenly的效果.
15.关于项目中的埋点和按钮等多次出现和使用的地方需要加上同一个东西时
在一期项目快结束的时候，发现一个很麻烦的问题，就是 关于项目中的埋点和按钮等多次出现和使用的地方需要加上同一个东西时，比如按钮需要加上防重复点击
解决方法： 在开始做项目时将这种在项目中经常用到的集合成一个方法或者组件，等到有需要修改时，直接在集成的方法或者组件中修改即可
16.请求多个IP地址的接口
一般来说，我们前端请求接口都是请求一个IP地址的接口，但是，也会存在请求多个IP地址的接口
解决方法：
- 在config.js 文件中配置多个请求IP，根据前缀的不同来选择相应的IP，VUE项目中调用如何两个接口
- 在get的请求方法中配置
get(path, querystring, header) {
const options = {
url: `${
path.indexOf("http") == -1 ? this._config.baseURL : ""}${
path}`,
method: "GET",
dataType: "json"
};
通过判断是否是http请求来决定使用配置的IP还是直接使用返回的IP