vue如何實現過渡動畫Message消息提示組件

本篇內容主要講解“vue如何實現過渡動畫Message消息提示組件”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue如何實現過渡動畫Message消息提示組件”吧!

概述

在我自己平時做項目的時候，必不可少的會用到message組件，用來對用戶友好反饋，總之使用頻率還是挺高的，剛開始工作的時候，經常用的就是組件庫的現成的，想想也不能總是用別人現成的，最近模擬組件庫調用方式自己寫了一個消息提示組件，支持過渡效果，支持自己進行擴展。

目錄結構

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

<template>
//css實現過渡
  <transition name="fade-in" mode="out-in">
    <div
      :class="['message-box', 'message-box-' + type]"
      v-if="show"
      :
    >
      <p>{{ message }}</p>
    </div>
  </transition>
  //方法2：js實現過渡，用到了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"
      :
    >
      <p>{{ message }}</p>
    </div>
  </transition>
</template>
<script>
//動畫組件用到了Velocity，詳細用法可以看官網
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實現動畫效果邏輯
       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數據，具體參考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>

• 效果圖：

到此，相信大家對“vue如何實現過渡動畫Message消息提示組件”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！