工作日记（十一）：完整项目开发之前端vue常用语法与常用js

2020.7.21

今日继续前端vue开发。

本人所在小组的两位前端人员似乎还有之前的项目需要处理，看来准备使用本人（后端）开发的前端页面了。

PS：本人小组的前端同事基本没有提供任何援助（没空开发页面；不过本人倒是也没啥问题需要问那两位）

本人预估周五结束时大概能完成前端的开发，毕竟本人不是专业前端，还一人做着2人的工作（确切的说是3人，原本自己后端的work和2个前端的work）。

总的来说，是本人自愿开发（学习）前端的，为了积累开发经验（后端做完了，闲的没事干）；目前开发时间还在可控范围内，暂时没有遇到大问题，只是前端页面功能较多、逻辑复杂、导致需要花费较多时间。

-------------------------------------------------------------------------

以下是今日遇到的一些小问题与相应代码：

-------------------------------------------------------------------------

1.json数组的添加与删除方法

（1）json数组添加：

var jsonObj = {"id":"001","list":[{"name":"a"},{"name":"b"}]};
var newArray = {"name":"c"};
//push方法放到了数组末尾
jsonObj.list.push(newArray);
console.log(JSON.stringify(jsonObj));

（2）json数组删除（按下标）：

var jsonObj = {"id":"001","list":[{"name":"a"},{"name":"b"}]};
//splice方法的意思是从下标为0处开始，移除1个元素；
//splice方法也可以传入三个参数，边移除边插入元素（也就是替换元素）
jsonObj.list.splice(0,1);
console.log(JSON.stringify(jsonObj));

2.当vue使用v-for循环展示绑定的对象时，有时候修改了对象的值，但是v-for列表没有更新；这时就可以在js中使用这句来强制刷新v-for标签：

this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题

3.vue中使用el-dialog标签引入其它页面的方法：

(1)使用import语句引入其它页面：

import OutPage from '../../fileUrl/fileName'

注意，文件名不加【.vue】，并且import之后的标签为自定义的，此处以【OutPage】为例继续说明。

(2)在export default{}标签中增加：

componets:{ OutPage },

注意，如果已有componets标签，直接写到该标签里即可，用逗号隔开；此处的名字与import处的对应。

(3)在正文<template></template>标签中的一个div标签里写以下代码：

<el-dialog :visible.sync="isShow" @close="cancelDialog" customClass="customWidth" append-to-body>
  <out-page v-if="isShow" @close="showContent" :param1="param1" />
</el-dialog>

说明，【isShow】是决定是否展示的自定义参数，写在js里（例如，return{ isShow: false,} ），通过其它方法修改它的值即可；

【@close】中的内容对应一个方法，当dialog关闭时会执行；

customClass对应着一个自定义样式，此处可以修改dialog的宽度（使用通常方法无法修改，会被默认的宽度覆盖掉），如下：

.customWidth{
   80%;
}

【append-to-body】，如果没有这一句，当dialog中再次嵌套dialog时，第二个dialog会被模态框（黑框）挡住，也就是层级出问题；加上就正常了。

【out-page】标签则是上方import时自定义的标签——【OutPage】，关联着对应页面，使用时有些变化。

【:param1】这句可以给dialog中的页面传入参数，下方会仔细讲解。

4.vue中使用嵌套dialog时第二个dialog被模态框（黑框）挡住的问题与解决办法：

在第二个dialog中增加这一句即可（见上方）：

append-to-body

5.vue使用dialog显示其它页面的入参与回参方法：

(1)首先，在第一个页面的dialog标签内部的自定义页面标签中增加（具体如上）【:param1】：

<out-page v-if="isShow" @close="showContent" :param1="param1" />

这个【"param1"】对应return{}标签里的变量的值。

(2)在第二个页面（dialog显示的页面）的export default{}标签中增加：

props{
  param1:{
    type: Boolean,
    default: false
  }
},

这个param1对应的是【:param1】。

到此，dialog页的入参就完成了。

(3)在第二个页面中增加一个关闭按钮（或者其它类似的），并增加一个@click方法，方法内容为：

closeThisDialog(){
 var back = "返回的内容";
 this.$emit('close', back);
}

(4)在第一个页面中增加一个方法showContent，这个名字是与@close对应的：

showContent(value){
  console.log(value);
  this.isShow = false;
}

到此就可以接收到dialog返回的内容了，顺便修改isShow的值将dialog关闭（隐藏）。