Teleport组件的作用

哇！你知道吗？Vue3里有个超好用的Teleport组件！用它能随便把组件中的东西移到网页上任何地方，连组件内部都不用动。这样做的话，设计全屏通知或弹出框就容易多。不管在哪儿，哪怕是另一个网页或组件，只要用上它，用户都能立马接收到消息，体验瞬间提高！

创建通知组件

先得弄个能显示新消息的东西，比如说Vue3里的那个叫Notification.vue的玩意儿。这个小玩意儿得配置好接收到的通知消息，这样才能把消息在模板上显示出来。

编写Notification.vue组件

  

    {{ message }}
  


export default {
  props: ['message']
}


.notification {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  padding: 10px;
  background-color: #f0f0f0;
  color: #333;
  text-align: center;
}

Notice.vue这个组件真的超棒的！你想怎么打扮就怎么打扮它，加点特效什么的都行，互动规则也是自己定。收到了外部通知，通过props把消息带进来，然后模板里就能看到。当然，别忘了加个点一下的功能或者关闭按钮，这样每个人都可以自主选择关不关闭通知。于是，通知不仅能让人看到，大家还可以根据喜好去操作！

创建全局通知Portal

想让蹦出来的通知在浏览器外显示？那就要使用一个叫NotificationPortal.vue的Portal组件了。这个神器能用Teleport魔法把Notification.vue移到你想要的地方。在Vue3里，在NotificationPortal.vue模板里轻松地加一句Teleport就可以！

编写NotificationPortal.vue组件

在那个叫NotificationPortal.vue的文件里面，我们就是用了Teleport这个神器把Notification.vue给挪到了”通知门户”那里。这样，所有的通知信息就能在整个网页上看见！而且，为了让大家无论何时何地都能注意到通知，我们还得在Portal组件里面用Vue3那神奇的响应式API来时刻关注notificationMessage这些数据有没有变，然后再决定是否要展示或者隐藏通知！

  
    
  
  



import { ref, watch } from 'vue'
import Notification from './Notification.vue'
export default {
  components: {
    Notification
  },
  setup() {
    const showNotification = ref(false)
    const notificationMessage = ref('')
    watch(notificationMessage, () => {
      showNotification.value = !!notificationMessage.value
      if (showNotification.value) {
        setTimeout(() => {
          notificationMessage.value = ''
        }, 3000)
      }
    })
    return {
      showNotification,
      notificationMessage
    }
  }
}


#notification-portal {
  z-index: 9999;
}

触发全局通知显示

行，咱动手干活！首先得有个NotificationPortal.vue文件，这个能让整个app都能用上通知功能。想要看消息或关掉它，那就太简单了，直接改改notificationMessage这些参数就搞定。举个例子，要是想让某个按钮发通知，就在它的点击事件里加点代码，再设置个过期时间就好。

灵活运用全局通知功能

你只要照着上面说的，就可以轻松设置好Vue3里的通知功能！不论何时何地，只要你需要，都能随意调整，比如我们可以用这个通知告诉其他人，用户账号登录状态变了；完成操作后分享；或者当App出现问题时，也可以通过这个通知来解决，让大家用得更加舒心。

优化全局通知体验

  

    
Vue 3全局通知功能演示
    
    
  


import NotificationPortal from './NotificationPortal.vue'
export default {
  components: {
    NotificationPortal
  }
}

告诉你我们的开发大哥们在给通知这个事情升级！他们研究怎么让界面好用又美观，一眼就能看出是不是一套的；再加点儿炫酷的动画效果或是好听的提示音，让大家用着更带劲儿；还要解决好一次发多条通知或者连续发通知时显示乱七八糟的问题，这样才能提升通知功能，让应用程序越来越棒，大家也会更满意！

扩展其他应用场景

别只瞧着全局提示了Teleport还有很多好玩儿的功能！像弹出来的小窗口，飘来飘去的浮窗啥的，再加上简单地拖拽元素这种小事儿，都可以交给Teleport搞定！搞开发的小伙伴们快来试试看！用在各式各样的业务场景里，保证让你的网页互动效果炫酷到不行，开发效率也翻倍飙升喔！

notificationMessage.value = '这是一条通知的内容'