Vue封裝全局toast組件的完整實(shí)例

更新時(shí)間：2021年07月13日 11:18:03 作者：_kyz

組件(Component)是 Vue.js 最強(qiáng)大的功能之一,組件可以擴(kuò)展 HTML 元素,封裝可重用的代碼,這篇文章主要給大家介紹了關(guān)于Vue封裝全局toast組件,需要的朋友可以參考下

前言

最近體驗(yàn)了下Vue，Toast都是前端常用組件，本文詳細(xì)介紹了Vue封裝全局toast組件的過程，下面話不多說了，來一起看看詳細(xì)的介紹吧

一. 借助 vue-cli

1. 定義 Toast 組件

// components/Toast

<template>
  <transition name="fade">
    <div v-show="visible">{{message}}</div>
  </transition>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      message: ''
    }
  }
}
</script>

<style scoped>
div {
  position: fixed;
  top: 30%;
  left: 50%;
  padding: 5px 20px;
  color: #fff;
  background-color: #424242;
  border-radius: 5px;
  text-align: center;
  transform: translate(-50%, -50%);
}
/* vue動畫過渡效果設(shè)置 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

2. 在 main.js 里面配置

import Vue from 'vue'
import App from './App.vue'
import Toast from './components/Toast'

// 定義插件對象
const ToastObj = {
  install: function (Vue) {
    // 創(chuàng)建一個(gè)Vue的“子類”組件
    const ToastConstructor = Vue.extend(Toast)
    // 創(chuàng)建一個(gè)該子類的實(shí)例,并掛載到一個(gè)元素上
    const instance = new ToastConstructor()
    console.log(instance)
    // 將這個(gè)實(shí)例掛載到動態(tài)創(chuàng)建的元素上,并將元素添加到全局結(jié)構(gòu)中
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)

    // 在Vue的原型鏈上注冊方法，控制組件
    Vue.prototype.$toast = (msg, duration = 1500) => {
      instance.message = msg
      instance.visible = true
      setTimeout(() => {
        instance.visible = false
      }, duration)
    }
  }
}
Vue.use(ToastObj)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

3. 在其他組件內(nèi)使用

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data: () => {
    return {
      msg: 'HelloWord'
    }
  },
  mounted () {
  	// 使用 toast 組件
    this.$toast('組件掛載成功')
  }
}
</script>

二、不借助 vue-cli

在借助 vue-cli 的情況下，可以方便實(shí)現(xiàn)組件的導(dǎo)入導(dǎo)出，但是在不借助構(gòu)建工具的情況下，就需要使用其他方法了

1. 注冊 toast 組件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/vue/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <my-button></my-button>
  </div>
  <div id="toast"></div>
  <script>
    // 定義 toast 全局組件
    const Toast = Vue.component('toast', {
      data() {
        return {
          isShow: false,
          message: '全局提示',
          wrapperStyle: {
            position: 'fixed',
            top: '20%',
            left: '50%',
            zIndex: 10000,
            padding: '6px 12px',
            backgroundColor: '#424242',
            borderRadius: '5px',
            transform: 'translate(-50%, -50%)'
          },
          textStyle: {
            color: '#fff',
            fontSize: '14px'
          }
        }
      },
      template: `<div v-show="isShow" :style="wrapperStyle">
                  <span :style="textStyle">{{ message }}</span>
                </div>`
    })

2. 注冊 toast 插件

// 定義插件對象
const ToastObj = {
  install: function (Vue) {
    // 創(chuàng)建一個(gè) toast 組件實(shí)例,并掛載到一個(gè)元素上
    const instance = new Toast()
    // 將這個(gè)實(shí)例掛載到DOM中
    instance.$mount('#toast')

    // 在Vue的原型鏈上注冊方法，控制組件
    Vue.prototype.$toast = ({message, duration = 2000} = {}) => {
      instance.message = message
      instance.isShow = true

      setTimeout(() => {
        instance.isShow = false
      }, duration)
    }
  }
}
// 注冊 toast 插件
Vue.use(ToastObj)

3. 在其他組件內(nèi)使用

    Vue.component('my-button', {
      data() {
        return {
          wrapperStyle: {
            width: '70px',
            padding: '20px',
            backgroundColor: 'green'
          },
          textStyle: {
            color: '#fff',
            fontSize: '16px'
          }
        }
      },
      methods: {
        handleClick() {
          this.$toast({
            message: '我點(diǎn)擊了'
          })
        }
      },
      template: `<div :style="wrapperStyle" @click="handleClick">
                  <span :style="textStyle">點(diǎn)擊提示</span>
                </div>`
    })

    const vm = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>