最簡單的vue消息提示全局組件的方法
更新時間：2019年06月16日 11:28:35 作者：渣渣輝
這篇文章主要介紹了最簡單的vue消息提示全局組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
簡介
實現(xiàn)功能
- 自定義文本
- 自定義類型(默認，消息，成功，警告，危險)
- 自定義過渡時間
使用vue-cli3.0生成項目
toast全局組件編寫
/src/toast/toast.vue
<template>
<div class="app-toast"
v-if="isShow"
:class="{'info': type=== 'info','success': type=== 'success','wraning': type=== 'wraning','danger': type=== 'danger'}">{{text}}</div>
</template>
<style scoped>
.app-toast {
position: fixed;
left: 50%;
top: 50%;
background: #ccc;
padding: 10px;
border-radius: 5px;
transform: translate(-50%, -50%);
color: #fff;
}
.info {
background: #00aaee;
}
.success {
background: #00ee6b;
}
.wraning {
background: #eea300;
}
.danger {
background: #ee000c;
}
</style>
/src/toast/index.js
import vue from 'vue'
import toastComponent from './toast.vue'
// 組件構(gòu)造器，構(gòu)造出一個 vue組件實例
const ToastConstructor = vue.extend(toastComponent)
function showToast ({ text, type, duration = 2000 }) {
const toastDom = new ToastConstructor({
el: document.createElement('div'),
data () {
return {
isShow: true, // 是否顯示
text: text, // 文本內(nèi)容
type: type // 類型
}
}
})
// 添加節(jié)點
document.body.appendChild(toastDom.$el)
// 過渡時間
setTimeout(() => {
toastDom.isShow = false
}, duration)
}
// 全局注冊
function registryToast () {
vue.prototype.$toast = showToast
}
export default registryToast
全局注冊
/main.js
import toastRegistry from './toast/index' Vue.use(toastRegistry)
調(diào)用
/src/views/home.vue
<template>
<div class="home">
<input type="button"
value="顯示彈窗"
@click="showToast">
</div>
</template>
<script>
export default {
name: 'home',
methods: {
showToast () {
this.$toast({
text: '我是消息'
// type: 'wraning',
// duration: 3000
})
}
}
}
</script>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
彈窗經(jīng)常被使用在一些表單的增刪改查啊,或者彈出一些提示信息等等,這篇文章主要給大家介紹了關(guān)于Vue?Dialog彈窗詬病解決的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要為大家介紹了Vant中Popover氣泡彈出框位置錯亂問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要為大家詳細介紹了vue-cropper組件實現(xiàn)圖片切割上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
本篇文章主要介紹了Vee-Validate的使用方法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue 項目 iOS WKWebView 加載問題，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
vue中動態(tài)渲染數(shù)據(jù)時使用$refs無效的解決
這篇文章主要介紹了vue中動態(tài)渲染數(shù)據(jù)時使用$refs無效的解決方案，具有很好的參考價值。希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了el-tree樹設置懶加載以及設置默認勾選方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
跨域是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本,它是由瀏覽器的同源策略造成的,是瀏覽器對JavaScript實施的安全限制,下面這篇文章主要給大家介紹了關(guān)于Vite代理如何解決跨域問題的相關(guān)資料,需要的朋友可以參考下2023-03-03
vue3中的v-model相當于vue2中的v-model和v-bind.sync 修飾符組合在一起的產(chǎn)物（擇優(yōu)整合）v-bind.sync 在 vue3 中被移除了可以在組件標簽上使用多個 v-model 綁定屬性,使用參數(shù)區(qū)分,這篇文章主要介紹了vue3?中v-model語法糖,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue實現(xiàn)數(shù)字+英文字母組合鍵盤功能,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-12-12