這篇文章主要介紹“Vue封裝全局toast組件的應用”，在日常操作中，相信很多人在Vue封裝全局toast組件的應用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue封裝全局toast組件的應用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
前言
一. 借助 vue-cli
1. 定義 Toast 組件
2. 在 main.js 里面配置
3. 在其他組件內使用
二、不借助 vue-cli
1. 注冊 toast 組件
2. 注冊 toast 插件
3. 在其他組件內使用
最近體驗了下Vue，Toast都是前端常用組件，本文詳細介紹了Vue封裝全局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>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')<template>
<div class="hello">
<h2>{{ msg }}</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data: () => {
return {
msg: 'HelloWord'
}
},
mounted () {
// 使用 toast 組件
this.$toast('組件掛載成功')
}
}
</script>在借助 vue-cli 的情況下，可以方便實現組件的導入導出，但是在不借助構建工具的情況下，就需要使用其他方法了
<!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" :>
<span :>{{ message }}</span>
</div>`
})// 定義插件對象
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)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 : @click="handleClick">
<span :>點擊提示</span>
</div>`
})
const vm = new Vue({
el: '#app'
})
</script>
</body>
</html>到此，關于“Vue封裝全局toast組件的應用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
