vue实现过渡动画Message消息提示组件示例详解

目录

• 概述
• 目录结构
• 总结

概述

在我自己平时做项目的时候，必不可少的会用到message组件，用来对用户友好反馈，总之使用频率还是挺高的，刚开始工作的时候，经常用的就是组件库的现成的，想想也不能总是用别人现成的，最近模拟组件库调用方式自己写了一个消息提示组件，支持过渡效果，支持自己进行扩展。

目录结构

• .src/component/MessageBox/MessageBox.vue代码：

• .src/component/MessageBox/index.js代码：

//这里主要是为了按需注册导出当前组件
import MessageBox from "./MessageBox.vue";
export default MessageBox;

• .src/component/index.js代码：

import MessageBox from "./MessageBox/index";
const componetns = [MessageBox];
export { MessageBox };
//保存所有提示组件的偏移量队列
const messageQueen = [];
export default {
  install(Vue) {
  //注册全局组件
    componetns.forEach((compoennt) => {
      Vue.component(compoennt.name, compoennt);
    });
    //挂载实例化消息组件对象
    Vue.prototype.$message = {
      warning(message) {
        Vue.prototype.$show({ message, type: "warning" });
      },
      success(message) {
        Vue.prototype.$show({ message, type: "success" });
      },
      error(message) {
        Vue.prototype.$show({ message, type: "error" });
      },
      default(message) {
        Vue.prototype.$show({ message, type: "default" });
      },
    };
    Vue.prototype.$show = function (props) {
      // 向弹窗队列添加当前组件的偏移量(入栈)
      if (!messageQueen.length) {
        messageQueen.push(20);
      } else {
        messageQueen.push(messageQueen[messageQueen.length - 1] + 20 + 48);
      }
      /*
       *方法1：直接返回一个vnode组件虚拟dom也可以
       */
      // let MessageBoxConstructor = Vue.extend({
      //   render(h) {
      //     return h("message-box", {
      //       props: {
      //         ...props,
      //         show: true,
      //       },
      //     });
      //   },
      // });
      let MessageBoxConstructor = Vue.extend(MessageBox);
      // 方法2：实例化组件的时候传递配置项也是可以的
      let messageBoxInstance = new MessageBoxConstructor({
        // 向组件传递props数据，具体参考vue官方propsData
        propsData: {
          ...props,
          offset: !messageQueen.length
            ? 20
            : messageQueen[messageQueen.length - 1],
        },
      }).$mount();
      document.body.appendChild(messageBoxInstance.$el);
      // 显示弹窗（增加过渡效果）
      messageBoxInstance.setShow(true);
      setTimeout(() => {
        // 当前弹窗出栈
        messageQueen.shift();
        // 销毁弹窗（增加过渡效果）
        messageBoxInstance.setShow(false);
      }, 1500);
    };
  },
};

• .src/App/index.js代码：

• 效果图：

总结

类似这种我们脱离模板动态生成组件插入到页面当中，在实际项目中用的还是不怎么多的，需要重点掌握Vue.extend方法，不知道这个方法用法的，建议先去官网学习这个aip的用法，更多关于vue过渡动画Message组件的资料请关注脚本之家其它相关文章！