用websocket简单实现一个类似Notification的提示框

最新推荐文章于 2024-07-12 13:10:38 发布

多想有个林夕

最新推荐文章于 2024-07-12 13:10:38 发布

阅读量319

点赞数

本文链接：https://blog.csdn.net/weixin_50395373/article/details/118767368

版权

本文介绍了如何通过Vue.js和Vuex实现一个可定制的通知组件，包括在store中管理显示状态，使用CSS动画控制样式，以及WebSocket触发显示。展示了如何创建一个简单的通知系统，类似系统通知功能。

摘要由CSDN通过智能技术生成

最近项目中有用到类似于Notification的东西。

看过代码之后，发现它更像是一个插件。想要自定义里面的样式或者内容都不好写。

于是在项目中简单的自己写了一下。

第一步，先在store中声明一个显示Notification的布尔值。

const state = {
  notifiCationIsShow: false,
}


mutations: {    setNotificationIsShow(state, payload) {
      //重要消息
      state.notifiCationIsShow= payload
    },}

再在页面中声明一个变量，监听store中的值.

 watch: {
    '$store.state.notifiCationTimeShow': function(value) {
      this.NotificationTimeShow = value
      if (value) {
        setTimeout(() => {
          this.$store.state.notifiCationTimeShow= false
        }, 10000)
      }
    }
   
  },

第二步，创建一个文件，将其定位到右上角，并且用CSS写一个过渡动画。

  <transition name="slide-fade" v-if="NotificationTimeShow">
        <div class="box">
          <div class="notification">
            //这里放组件

          </div>
        </div>
      </transition>







<style lang="scss" scoped>

.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

@keyframes show {
  0% {
    right: -150px;
  }
  100% {
    right: 10px;
  }
}

.box2 {
  right: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  line-height: 1.5715;
  list-style: none;
  position: fixed;
  z-index: 100;
  margin-top: 280px;
  width: 368px;
  margin-right: 24px;
  border-radius: 8px;
}


.box {
  right: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  line-height: 1.5715;
  list-style: none;
  position: fixed;
  z-index: 10;
  margin-top: 63px;
  width: 368px;
  margin-right: 24px;
  border-radius: 8px;
  animation: show cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.4s;
}
.notification {
  position: relative;
  padding: 16px 4px 0px 4px;
  overflow: hidden;
  line-height: 1.5;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  ::before {
    box-sizing: border-box;
  }
}
</style>

第三步，当websocket有消息进来时候，将store中的值变为true。并把要展示的数据放上去。

这样一个简单的类似效果就出来了！类似这种