Vue封裝全局toast組件的完整實例
前言
最近體驗瞭下Vue,Toast都是前端常用組件,本文詳細介紹瞭Vue封裝全局toast組件的過程,下面話不多說瞭,來一起看看詳細的介紹吧
一. 借助 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動畫過渡效果設置 */ .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) { // 創建一個Vue的“子類”組件 const ToastConstructor = Vue.extend(Toast) // 創建一個該子類的實例,並掛載到一個元素上 const instance = new ToastConstructor() console.log(instance) // 將這個實例掛載到動態創建的元素上,並將元素添加到全局結構中 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. 在其他組件內使用
<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 的情況下,可以方便實現組件的導入導出,但是在不借助構建工具的情況下,就需要使用其他方法瞭
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) { // 創建一個 toast 組件實例,並掛載到一個元素上 const instance = new Toast() // 將這個實例掛載到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. 在其他組件內使用
Vue.component('my-button', { data() { return { wrapperStyle: { width: '70px', padding: '20px', backgroundColor: 'green' }, textStyle: { color: '#fff', fontSize: '16px' } } }, methods: { handleClick() { this.$toast({ message: '我點擊瞭' }) } }, template: `<div :style="wrapperStyle" @click="handleClick"> <span :style="textStyle">點擊提示</span> </div>` }) const vm = new Vue({ el: '#app' }) </script> </body> </html>
總結
到此這篇關於Vue封裝全局toast組件的文章就介紹到這瞭,更多相關Vue封裝全局toast組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!