手写一个类似element的Notification通知，利用vue 的 transition内置组件 实现过渡效果

一、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>