快捷導(dǎo)航

vue實(shí)現(xiàn)過渡動(dòng)畫Message消息提示組件示例詳解

更新時(shí)間：2022年07月27日 15:15:45 作者：陌年微涼_

這篇文章主要為大家介紹了vue實(shí)現(xiàn)過渡動(dòng)畫Message消息提示組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

概述

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

目錄結(jié)構(gòu)

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

<template>
//css實(shí)現(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實(shí)現(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>
//動(dòng)畫組件用到了Velocity，詳細(xì)用法可以看官網(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實(shí)現(xiàn)動(dòng)畫效果邏輯
       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代碼：

//這里主要是為了按需注冊(cè)導(dǎo)出當(dāng)前組件
import MessageBox from "./MessageBox.vue";
export default MessageBox;

.src/component/index.js代碼：

import MessageBox from "./MessageBox/index";
const componetns = [MessageBox];
export { MessageBox };
//保存所有提示組件的偏移量隊(duì)列
const messageQueen = [];
export default {
  install(Vue) {
  //注冊(cè)全局組件
    componetns.forEach((compoennt) => {
      Vue.component(compoennt.name, compoennt);
    });
    //掛載實(shí)例化消息組件對(duì)象
    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) {
      // 向彈窗隊(duì)列添加當(dāng)前組件的偏移量(入棧)
      if (!messageQueen.length) {
        messageQueen.push(20);
      } else {
        messageQueen.push(messageQueen[messageQueen.length - 1] + 20 + 48);
      }
      /*
       *方法1：直接返回一個(gè)vnode組件虛擬dom也可以
       */
      // let MessageBoxConstructor = Vue.extend({
      //   render(h) {
      //     return h("message-box", {
      //       props: {
      //         ...props,
      //         show: true,
      //       },
      //     });
      //   },
      // });
      let MessageBoxConstructor = Vue.extend(MessageBox);
      // 方法2：實(shí)例化組件的時(shí)候傳遞配置項(xiàng)也是可以的
      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(() => {
        // 當(dāng)前彈窗出棧
        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">錯(cuò)誤</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é)

類似這種我們脫離模板動(dòng)態(tài)生成組件插入到頁面當(dāng)中，在實(shí)際項(xiàng)目中用的還是不怎么多的，需要重點(diǎn)掌握Vue.extend方法，不知道這個(gè)方法用法的，建議先去官網(wǎng)學(xué)習(xí)這個(gè)aip的用法，更多關(guān)于vue過渡動(dòng)畫Message組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: