相信普通的vue組件大家都會(huì)寫(xiě),定義 -> 引入 -> 注冊(cè) -> 使用,行云流水,一氣呵成,但是如果我們今天是要自定義一個(gè)彈窗組件呢?

首先,我們來(lái)分析一下彈窗組件的特性(需求):

1. 輕量 --一個(gè)組件小于 1Kib (實(shí)際打包完不到0.8k)
2. 一般都是多處使用 --需要解決每個(gè)頁(yè)面重復(fù)引用+注冊(cè)
3. 一般都是跟js交互的 --無(wú)需 在<template>里面寫(xiě) <toast :show="true" text="彈窗消息"></toast>

今天,我們就抱著上面2個(gè)需求點(diǎn),來(lái)實(shí)現(xiàn)一個(gè)基于vue的toast彈窗組件,下圖是最終完成的效果圖.

step_3

一. 先寫(xiě)一個(gè)普通的vue組件

文件位置 /src/toast/toast.vue

<template>
  <div class="wrap">我是彈窗</div>
</template>

<style scoped>
  .wrap{
    position: fixed;
    left: 50%;
    top:50%;
    background: rgba(0,0,0,.35);
    padding: 10px;
    border-radius: 5px;
    transform: translate(-50%,-50%);
    color:#fff;
  }
</style>

二. 在我們需要使用的頁(yè)面引入組件,方便看效果和錯(cuò)誤

<template>
  <div id="app">
    <toast></toast>
  </div>
</template>

<script>
  import toast from './toast/toast'
  export default {
    components: {toast},
  }
</script>

step_1

三. 實(shí)現(xiàn)動(dòng)態(tài)加載組件

可以看到,已經(jīng)顯示出一個(gè)靜態(tài)的彈出層了,接下來(lái)我們就來(lái)看看如何實(shí)現(xiàn)動(dòng)態(tài)彈出.

我們先在 /src/toast/ 目錄下面,新建一個(gè)index.js, 然后在index.js里面,敲入以下代碼(由于該代碼耦合比較嚴(yán)重,所以就不拆開(kāi)一行一行講解了,改成行內(nèi)注釋)

文件位置 /src/toast/index.js

import vue from 'vue'

// 這里就是我們剛剛創(chuàng)建的那個(gè)靜態(tài)組件
import toastComponent from './toast.vue'

// 返回一個(gè) 擴(kuò)展實(shí)例構(gòu)造器
const ToastConstructor = vue.extend(toastComponent)

// 定義彈出組件的函數(shù) 接收2個(gè)參數(shù), 要顯示的文本 和 顯示時(shí)間
function showToast(text, duration = 2000) {

  // 實(shí)例化一個(gè) toast.vue
  const toastDom = new ToastConstructor({
    el: document.createElement('div'),
    data() {
      return {
        text:text,
        show:true
      }
    }
  })

  // 把 實(shí)例化的 toast.vue 添加到 body 里
  document.body.appendChild(toastDom.$el)

  // 過(guò)了 duration 時(shí)間后隱藏
  setTimeout(() => {toastDom.show = false} ,duration)
}

// 注冊(cè)為全局組件的函數(shù)
function registryToast() {
  // 將組件注冊(cè)到 vue 的 原型鏈里去,
  // 這樣就可以在所有 vue 的實(shí)例里面使用 this.$toast()
  vue.prototype.$toast = showToast
}

export default registryToast

附一個(gè)傳送門(mén) vue.extend 官方文檔

四. 試用

到這里,我們已經(jīng)初步完成了一個(gè)可以全局注冊(cè)和動(dòng)態(tài)加載的toast組件,接下來(lái)我們來(lái)試用一下看看

1. 在vue的入口文件(腳手架生成的話是./src/main.js) 注冊(cè)一下組件

文件位置 /src/main.js

import toastRegistry from './toast/index'

// 這里也可以直接執(zhí)行 toastRegistry()
Vue.use(toastRegistry)

2. 我們稍微修改一下使用方式,把第二步 的引用靜態(tài)組件的代碼,改成如下

<template>
  <div id="app">
    <input type="button" value="顯示彈窗" @click="showToast">
  </div>
</template>

<script>
  export default {
    methods: {
      showToast () {
        this.$toast('我是彈出消息')
      }
    }
  }
</script>

step_2

可以看到,我們已經(jīng)不需要在頁(yè)面里面引入跟注冊(cè)組件,就可以直接使用this.$toast()了.

五. 優(yōu)化

現(xiàn)在我們已經(jīng)初步實(shí)現(xiàn)了一個(gè)彈窗.不過(guò)離成功還差一點(diǎn)點(diǎn),缺少一個(gè)動(dòng)畫(huà),現(xiàn)在的彈出和隱藏都很生硬.

我們?cè)賹?duì) toast/index.js 里的showToast函數(shù)稍微做一下修改(有注釋的地方是有改動(dòng)的)

文件位置 /src/toast/index.js

function showToast(text, duration = 2000) {
  const toastDom = new ToastConstructor({
    el: document.createElement('div'),
    data() {
      return {
        text:text,
        showWrap:true,    // 是否顯示組件
        showContent:true  // 作用:在隱藏組件之前,顯示隱藏動(dòng)畫(huà)
      }
    }
  })
  document.body.appendChild(toastDom.$el)

  // 提前 250ms 執(zhí)行淡出動(dòng)畫(huà)(因?yàn)槲覀冊(cè)賑ss里面設(shè)置的隱藏動(dòng)畫(huà)持續(xù)是250ms)
  setTimeout(() => {toastDom.showContent = false} ,duration - 1250)
  // 過(guò)了 duration 時(shí)間后隱藏整個(gè)組件
  setTimeout(() => {toastDom.showWrap = false} ,duration)
}

然后,再修改一下toast.vue的樣式

文件位置 /src/toast/toast.vue

<template>
  <div class="wrap" v-if="showWrap" :class="showContent ?'fadein':'fadeout'">{{text}}</div>
</template>

<style scoped>
  .wrap{
    position: fixed;
    left: 50%;
    top:50%;
    background: rgba(0,0,0,.35);
    padding: 10px;
    border-radius: 5px;
    transform: translate(-50%,-50%);
    color:#fff;
  }
  .fadein {
    animation: animate_in 0.25s;
  }
  .fadeout {
    animation: animate_out 0.25s;
    opacity: 0;
  }
  @keyframes animate_in {
    0% {
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }
  @keyframes animate_out {
    0% {
      opacity: 1;
    }
    100%{
      opacity: 0;
    }
  }
</style>

大功告成,一個(gè)toast組件初步完成

step_3

總結(jié)

1. vue.extend 函數(shù)可以生成一個(gè) 組件構(gòu)造器 可以用這個(gè)函數(shù)構(gòu)造出一個(gè) vue組件實(shí)例
2. 可以用 document.body.appendChild() 動(dòng)態(tài)的把組件加到 body里面去
3. vue.prototype.$toast = showToast 可以在全局注冊(cè)組件
4. 顯示動(dòng)畫(huà)比較簡(jiǎn)單,隱藏動(dòng)畫(huà)必須要在隱藏之前預(yù)留足夠的動(dòng)畫(huà)執(zhí)行時(shí)間
5. 本文源碼地址 在這里
6. 以上都不重要,重要的是 給本文來(lái)個(gè)star