vue實現(xiàn)過渡動畫Message消息提示組件示例詳解
概述
在我自己平時做項目的時候,必不可少的會用到message組件,用來對用戶友好反饋,總之使用頻率還是挺高的,剛開始工作的時候,經(jīng)常用的就是組件庫的現(xiàn)成的,想想也不能總是用別人現(xiàn)成的,最近模擬組件庫調(diào)用方式自己寫了一個消息提示組件,支持過渡效果,支持自己進行擴展。
目錄結(jié)構
- .src/component/MessageBox/MessageBox.vue代碼:
<template> //css實現(xiàn)過渡 <transition name="fade-in" mode="out-in"> <div :class="['message-box', 'message-box-' + type]" v-if="show" :style="{ transform: 'translate(-50%,' + offset + 'px)' }" > <p>{{ message }}</p> </div> </transition> //方法2:js實現(xiàn)過渡,用到了Velocity <transition name="fade-in" mode="out-in" v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" > <div :class="['message-box', 'message-box-' + type]" v-if="show" :style="{ top: offset + 'px' }" > <p>{{ message }}</p> </div> </transition> </template> <script> //動畫組件用到了Velocity,詳細用法可以看官網(wǎng) import Velocity from "velocity-animate"; export default { name: "MessageBox", props: { message: { type: String, default: "", }, type: { type: String, default: "default", }, showClose: { type: Boolean, default: false, }, center: { type: Boolean, default: false, }, onClose: { type: Function, default: () => {}, }, offset: { type: Number, default: 20, }, }, data() { return { show: false, }; }, methods: { setShow(status) { this.show = status; }, //以下是js實現(xiàn)動畫效果邏輯 beforeEnter: function (el) { el.style.opacity = 0; }, enter: function (el, done) { Velocity(el, { opacity: 1 }, { duration: 300 }, { complete: done }); }, leave: function (el, done) { Velocity( el, { top: 0, opacity: 0, }, { duration: 300 ,easing: "ease-in"}, { complete: done } ); }, }, }; </script> <style lang="less"> .message-box { width: 380px; height: 48px; position: fixed; left: 50%; transform: translate(-50%); top: 20px; line-height: 48px; padding-left: 20px; } .message-box-default { background-color: #edf2fc; color: #cccc; } .message-box-success { background-color: #bcdbae; color: green; } .message-box-warning { background-color: #fdf6ec; color: orange; } .message-box-error { background-color: #f3f0f0; color: red; } .fade-in-enter-active, .fade-in-leave-active { transition: all 0.5s; } .fade-in-enter, .fade-in-leave-to { top: 0; opacity: 0; transform: translate(-50%, 0); } </style>
- .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數(shù)據(jù),具體參考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代碼:
<template> <div id="app"> <button @click="handleSuccess">成功</button> <button @click="handleWarning">警告</button> <button @click="handleDefault">消息</button> <button @click="handleError">錯誤</button> </div> </template> <script> export default { name: "App", methods: { handleSuccess() { this.$message.success("這是一條成功消息"); }, handleWarning() { this.$message.warning("這是一條警告消息"); }, handleDefault() { this.$message.default("這是一條消息提示"); }, handleError() { this.$message.error("這是一條失敗消息"); }, }, }; </script> <style lang="less"> button { width: 70px; height: 45px; border: 1px solid #000; margin: 5px!important; } </style>
- 效果圖:
總結(jié)
類似這種我們脫離模板動態(tài)生成組件插入到頁面當中,在實際項目中用的還是不怎么多的,需要重點掌握Vue.extend方法,不知道這個方法用法的,建議先去官網(wǎng)學習這個aip的用法,更多關于vue過渡動畫Message組件的資料請關注腳本之家其它相關文章!
相關文章
Vue3中是如何實現(xiàn)數(shù)據(jù)響應式示例詳解
這篇文章主要介紹了Vue3中是如何實現(xiàn)數(shù)據(jù)響應式示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07Nuxt.js的路由跳轉(zhuǎn)操作(頁面跳轉(zhuǎn)nuxt-link)
這篇文章主要介紹了Nuxt.js的路由跳轉(zhuǎn)操作(頁面跳轉(zhuǎn)nuxt-link),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11Vue淺析axios二次封裝與節(jié)流及防抖的實現(xiàn)
axios是基于promise的HTTP庫,可以使用在瀏覽器和node.js中,它不是vue的第三方插件,vue-axios是axios集成到Vue.js的小包裝器,可以像插件一樣安裝使用:Vue.use(VueAxios,?axios),本文給大家介紹axios的二次封裝和節(jié)流與防抖2022-08-08vue項目預覽excel表格功能(file-viewer插件)
這篇文章主要介紹了vue項目預覽excel表格功能(file-viewer插件),本文分步驟結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯詳解
el-tree-select組件是el-tree和el-select的結(jié)合體,他們的原始屬性未被更改,下面這篇文章主要給大家介紹了關于Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯的相關資料,需要的朋友可以參考下2022-11-11