vue中全局的message

创建一个message.vue组件

<template>
  <transition name="message-transition">
    <div v-show="show" class="message">
      <div class="message-content">{{ content }}</div>
    </div>
  </transition>
</template>

<script> export default { name: "Message", computed: { show() { return this.$store.state.message.show; }, content() { return this.$store.state.message.content; } } } </script>

<style scoped> .message { display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; pointer-events: none; } .message-content { max-width: 320px; padding: 10px 30px; border-radius: 10px; background-color: rgba(0, 0, 0, 0.8); font-size: 30px; color: #fff; line-height: 60px; } .message-transition-enter-active, .message-transition-leave-active { transition: opacity .5s; } .message-transition-leave, .message-transition-enter-to { opacity: 1; } .message-transition-enter, .message-transition-leave-to { opacity: 0; } </style>

 

相同目录下再建一个index.js文件

import Vue from 'vue'
import Message from './index.vue'

export default {
  install() {
    Vue.component(Message.name,Message);
    Object.defineProperty(Vue.prototype,'$message', {
      value(content) {
        this.$store.dispatch('message/start',content);
      }
    });
  }
}

 

 在store文件夹中建一个message.js文件

const message = { namespaced: true, state: { show: false, content: '', duration: '2000', timeoutId: 0, }, mutations: { setShow(state,flag) { state.show = flag; }, setContent(state,content) { state.content = content; }, setDuration(state,duration) { state.duration = duration; }, setTimeoutId(state, timeoutId) { state.timeoutId = timeoutId; } }, actions: { start(context, content) { clearTimeout(context.state.timeoutId); context.commit('setShow', true); context.commit('setContent', content); const timeoutId = setTimeout(() => { context.commit('setShow', false); },context.state.duration); context.commit('setTimeoutId', timeoutId); } } } export default message

 

然后再store文件中的index.js引入使用

 
   
   import Vue from 'vue' 
   
   
   import Vuex from 'vuex' 
   
   
   import message from '@/store/message.js' 
   
  
 
   
   Vue.use(Vuex) 
   
  
 
   
   export default new Vuex.Store({ 
   
   
     state: { 
   
   
     }, 
   
   
     mutations: { 
   
   
     }, 
   
   
     actions: { 
   
   
     }, 
   
   
     modules: { 
   
   
       message 
   
   
     } 
   
   
   }) 
   
 

之后在main.js引入index.js并全局使用就可以了

 

调用

<template>
  <div></div>
</template>

<script> export default { name: "index", created() { setTimeout(() => { this.$message('你好'); },1000); } } </script>

<style scoped>

</style>