Vue中实现一个自定义全局消息通知组件

在Vue项目中,有时候我们需要在任何组件内呈现一个消息通知,比如保存成功、提交错误等等。要实现这个功能,我们可以创建一个自定义的全局组件并注册为原型方法。

创建Message组件

首先创建一个Message.vue组件:

<template>
  <transition name="fade">
    <div v-if="isShow" class="message">
      <slot></slot>  
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}  
</script>

<style>
.message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%); 
  padding: 10px 20px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

这个组件通过v-if和过渡效果控制消息显示和隐藏。

注册为全局组件

然后在main.js中注册该组件:

import Message from './Message.vue'

const app = createApp(App)

app.component('Message', Message)

这样Message组件就可以在所有其他组件内直接使用了。

添加原型方法

最后我们在app实例上添加3个方法,用于调用消息组件:

app.config.globalProperties.$message = {
  // 成功
  success(options) {
    that.show(options, 'success')
  },

  // 失败
  error(options) {
    that.show(options, 'error')  
  },

  // 展示消息
  show(options, type) {
    // 处理参数
    // 显示消息 
  } 
}

通过app.config.globalProperties添加原型方法,使其可以在任意组件通过this.$message访问。

方法接收消息内容和类型,处理后统一通过Message组件显示。

使用方法

之后在其他组件中,可以直接调用:

export default {
  mounted() {
    this.$message.success('保存成功!') 
  }  
}

这样就实现了一个可以全局使用的消息提示组件。

总结

通过上面的方式,我们利用了:

组件化开发消息提示组件
注册为全局组件
在app实例挂载原型方法

使得所有组件都可以方便调用该消息提示,而无需每个页面、组件都引入和实例化它。

这种方式提高了代码的复用性,也使得逻辑更清晰。我们可以根据这个思路来封装和开发更多的可复用功能。