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{
width: 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关闭(隐藏)。