一、HTML结构
<transition name="slide-up">
<div
class="messageBox"
:class="{ isShow: isShow }"
v-if="showMessageBox.length > 0 && isShow"
>
<div class="title">
<div>消息通知</div>
<div style="cursor: pointer" @click="isShow = false">
<i class="el-icon-close"></i>
</div>
</div>
<div class="content_ms">
您提交的销售单,单据编码 :<br /><span
style="color: #44cef6; cursor: pointer"
>
XSD_20240524135811113a10a2c</span
><br />
订单号 1793839766391816263 已驳驳回,原因:
<span class="reason"
>XXXXxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span
>
, 请及时修改提交审核;
</div>
<div class="footer" v-if="showMessageBox.length > 1">
<div>您有xx条消息未读,请及时查看!</div>
<div>
<el-button type="info" size="small" @click="lookMore"
>查看更多</el-button
>
</div>
</div>
</div>
</transition>
二、在data中定义
data() {
return {
showMessageBox: [1, 1],
isShow: false,
};
},
三、进入页面判断是否显示
mounted() {
// - 判断length是否大于0,大于则isShow设置为true;否则设置为false
if (this.showMessageBox.length > 0) {
this.isShow = true;
} else {
this.isShow = false;
}
},
四、样式以及过度效果
<style lang="scss" scoped>
.messageBox {
width: 400px;
border: 1px solid #e2e2e2;
position: fixed;
right: 10px;
bottom: 10px;
padding: 10px;
border-radius: 10px;
box-shadow: -2px -2px 10px #afacac;
.title {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.content_ms {
line-height: 30px;
.reason {
width: 100px;
// border: 1px solid red;
overflow: hidden; //文本溢出隐藏超出部分
white-space: nowrap; //不换行
text-overflow: ellipsis; //溢出部分省略号显示
display: inline-block; //将span变成行内快
}
}
.footer {
margin-top: 30px;
}
.footer div:first-child {
margin-bottom: 10px;
}
.footer div:nth-child(2) {
float: right;
}
}
.isShow {
display: block;
}
/* 定义进入和离开的持续时间和动画函数 */
.slide-up-enter-active,
.slide-up-leave-active {
transition: all 3s ease; /* 持续时间3秒,动画类型为ease */
}
/* 进入时的位置设置为屏幕右部之外 */
.slide-up-enter {
transform: translateX(100%); /* 初始位置偏移100%,即完全在右方 */
opacity: 0; /* 初始化时透明度为0 */
}
/* 离开时的位置也设置为屏幕底部之外 */
.slide-up-leave-to {
transform: translateY(100%);
opacity: 0;
}
</style>