两种方法:
layout/index页面
一种是样式用ul,li,会自动落下
template(html)部分
<div class="floatclass">
<ul
class="box-card alarmRedBar"
v-for="(item, index) in noticeList"
:key="index"
>
<el-button
type="text"
class="textClose"
@click="close(item)"
icon="el-icon-circle-close"
>
</el-button>
<li class="text item">信息名称: {{ item.message}}</li></li>
</ul>
</div>
第二种:循环触发for循环
template(html)部分:
<div class="floatclass">
<el-card
class="box-card"
v-for="(item, index) in noticeList"
:key="index"
>
<div class="text item">计划名称: {{ item.message}}</div>
</el-card>
</div>
methods方法代码:
//关闭
close(ite) {
this.noticeList.some((item, i) => {
if (item.planId == ite.planId) {
this.noticeList.splice(i, 1);
// 在数组的some方法中,如果return true,就会立即终止这个数组的后续循环,所以相比较foreach,如果想要终止循环,那么建议使用some
return true;
}
});
},
getNoticeList() {
getNoticeList().then((res) => {
if (res.code == 200) {
this.noticeList = res.rows;
for (var i = 0; i < this.noticeList.length; i++) {
this.open(i,this.noticeList[i]);
}
}
});
},
open(i,noticeList) {
const h = this.$createElement;
this.$notify({
title: "标题名称",
message:noticeList.message,
position:"bottom-left",
offset:i * 80
});
},
css部分:
.floatclass {
display: flex;
-ms-flex-pack: center;
flex-wrap: wrap;
flex-direction: column;
position: absolute;
left: -200px;
bottom: 5px;
}
.alarmRedBar {
width: 200px;
height: 88px;
/* position: absolute;
cursor: move;
top: 89%;
left: 1%; */
z-index: 1001;
}
ul {
/* margin: 0; */
margin: 2px 2px;
padding: 0;
}
.el-button--medium.is-round {
padding: 3px 14px;
font-size: 13px;
}
.el-button--medium {
font-size: 13px;
}
ul li {
list-style-type: none;
}
.textClose {
float: right;
margin-top: -11px;
margin-right: 5px;
}