您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 413人已围观

简介 vue实现过渡动画Message消息提示组件示例详解_vue.js_

概述

在我自己平时做项目的时候，必不可少的会用到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); }; }, };