前提:
(1)当前物理席位是主任席(seatType==‘1’)
(2)管制席位TWR_ONE账号发布了内容:管制席——zhouzebiao——。。。。
(3)主任席tatai账号发布了内容:666——6666
原来是哪个账号发布的内容,自己都修改删除(只要判断item.userId == userId就行)
最新需求:
(1)在主任席登录的账号能删除修改所有人发布的。
(2)删除修改图标在鼠标悬浮的时候才会显示。
效果为:
代码:
<div class="message-panel">
<div class="content-div">
<div :class="['one-message-div', (seatType == '1' ||item.userId == userId) ? 'my-message' : '']"
v-for="item in contentList"
:key="item.id"
@dblclick="onLookBtn(item)"
>
<span class="title-content-span">
<span class="one-message-title-span">{{ item.theme }}</span> ——
<span :title="item.content">{{ item.content }}</span>
</span>
<span
class="one-btn-div delete-btn"
@click="onDeleteBtn(item)"
v-isLogin
v-if="seatType == '1' || item.userId == userId"
title="删除"
></span>
<span
class="one-btn-div edit-btn"
@click="onEditBtn(item)"
v-isLogin
v-if="seatType == '1' || item.userId == userId"
title="修改"
></span>
</div>
</div>
</div>
<style scoped>
@import "./common.css";
.message-panel {
height: 100%;
}
.message-panel .content-div {
width: 100%;
height: calc(100% - 21px);
overflow-y: auto;
}
.message-panel >>> .add-btn {
background-image: url("~@/assets/imgs/add.png");
width: 22px;
height: 22px;
float: right;
margin-top: 2px;
cursor: pointer;
z-index: 2;
margin-right: 3px;
}
.message-panel .one-message-div {
width: 100%;
height: 25px;
margin-top: 10px;
line-height: 25px;
background: #595959;
font-size: 14px;
/* overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; */
}
.message-panel >>> .one-btn-div {
width: 22px;
height: 22px;
float: right;
display: inline-block;
cursor: pointer;
display: none;
z-index: 3;
}
.message-panel >>> .edit-btn {
margin-right: 10px;
background-image: url(~@/assets/imgs/edit.png);
}
.message-panel >>> .delete-btn {
margin-right: 5px;
background-image: url(~@/assets/imgs/delete.png);
}
.message-panel >>> .one-message-title-span {
font-weight: 700;
}
.message-panel >>> .title-content-span {
width: 100%;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<style lang="less" scoped>
.my-message:hover {
.one-btn-div {
display: inline-block;
}
.title-content-span {
width: calc(100% - 64px);
}
}
</style>