溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹一個vue全局提示框組件，具體代碼如下所示：
<template>
<!-- 全局提示框 -->
<div v-show="visible" class="dialog-tips dialog-center">
<div>{{message}}</div>
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
message: ""
};
}
};
</script>
<style lang="scss">
.dialog-tips{
position: fixed;
z-index: 100;
min-width: 220px;
padding: 40px 22px;
white-space: nowrap;
background-color: #fff;
box-shadow: 0px 8px 15px 0 rgba(0, 0, 0, 0.1);
text-align: center;
.dialog-tips-icon{
width: 54px;
height: 54px;
@extend %bg-contain;
display: inline-block;
margin-bottom: 13px;
}
}
.dialog-center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
</style>
toast.js
import ToastComponent from './toast.vue'
const Toast = {};
// 注冊Toast
Toast.install = function (Vue) {
// 生成一個Vue的子類
// 同時這個子類也就是組件
const ToastConstructor = Vue.extend(ToastComponent)
// 生成一個該子類的實例
const instance = new ToastConstructor();
// 將這個實例掛載在我創建的div上
// 并將此div加入全局掛載點內部
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);
}
}
export default Toast
如何使用？
在main.js中
import Vue from 'vue' import Toast from './toast' Vue.use(Toast);
在component中
this.$toast("XXXXXXXXX");
總結
以上所述是小編給大家介紹的vue的全局提示框組件實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
