Vue自定義toast組件的實例代碼

2019-11-19 13:14:59

字體：大中小

來源：轉載

供稿：網友

寫了兩三天，終于把toast組件寫出來了。不敢說是最好的設計，希望有更好思路的朋友可以在評論區給我意見！_(:з」∠)_

第一步：寫toast.vue，將樣式之類的先定下來

<template> <div v-show="showToast" class="toast" :class="position"> <div class="toast_container" v-if="type=='success'">  <div><i class="iconfont icon-check icon"></i></div>  <div class="msg_container">{{message}}</div> </div> <div class="toast_container" v-else-if="type=='wrong'">  <div><i class="iconfont icon-warning-circle icon"></i></div>  <div class="msg_container">{{message}}</div> </div> <div class="toast_container" v-else-if="type=='loading'">  <div><loading10></loading10></div>  <div class="msg_container">{{message}}</div> </div></div></template><script>import loading10 from '../loading/spiner'export default{ props:{  message:String,  type:{   validator: function (value) {   // 值必須是這些字符串中的一個   return ['success', 'wrong', 'loading'].indexOf(value) !== -1  },   default:'success'  },  duration:{   type:Number,   default:3000  },   position:{   type:String,   default:'middle'  } }, components:{  loading10 }, data(){  return{   showToast:false  } }}</script><style scoped>.toast{ width:100%;}.toast_container{ background: rgba(0, 0, 0, 0.7); border-radius: 8px; color:#fff; margin-left:88px; margin-right:88px; text-align:center; padding-top:15px; padding-bottom: 15px; }.top{ position:absolute; top:10%;}.middle{ position:absolute; top:40%;}.bottom{ position:absolute; top:70%;}.msg_container{ margin-top:8px; margin-left:15px; margin-right:15px; line-height: 22px; font-size: 16px; word-wrap: break-word;}.icon{ font-size:30px;}</style>

一共三種樣式，成功（success），失?。╳rong），加載中（loading）；

一共三種位置，上（top），中（middle），下（bottom）；

所有涉及的圖案出自阿里的iconfont 手機淘寶圖標庫。

加載中動畫是自己寫的蹩腳的加載組件（emmm，就不放出來污染大家眼睛了，需要的可以評論區知會一聲_(:з」∠)_）

第二步：寫index.js ，完成toast組件的實例化

import Vue from 'vue'import Toast from './toast'let singleToast=true;let queue=[];function createInstance(){ // 返回一個擴展實例構造器 if(!queue.length||!singleToast){ const ToastConstructor = Vue.extend(Toast); // 構造一個實例 const toastDom = new ToastConstructor({ el: document.createElement('div'), }); // 把實例化的 toast.vue 添加到 body 里 document.body.appendChild(toastDom.$el); queue.push(toastDom); singleToast=true; return toastDom; }};// 注冊為全局組件的函數function toast(options= {}) { const toastDom = createInstance(); toastDom.message =typeof options === 'string' ? options : options.message; toastDom.type = options.type || 'success'; toastDom.duration = options.duration || 3000; toastDom.position = options.position || 'middle'; if(!toastDom.message){ toastDom.showToast =singleToast= false; }else{ toastDom.showToast=true; setTimeout(() => {toastDom.showToast =singleToast= false} ,toastDom.duration); }}// 將組件注冊到 vue 的 原型鏈里去,// 這樣就可以在所有 vue 的實例里面使用 this.$toast()// Vue.prototype.$toast = showToastVue.prototype.$toast = toast;export default toast

設置singleToast和queue的目的在于：確保同一時期界面上只有一個toast，不能同時出現多個toast。

由于toast會初始化，因此為了避免在任何操作之前界面上就出現一個toast，用if語句判斷：

如果沒有傳入的message，則不顯示toast（這樣可以使得初始化的toast不顯示）

否則顯示，并且過一定時間消失，只有singleToast為false，說明此刻界面上沒有toast，才能再新建一個toast實例（因為此時if判斷內queue.length 不為0【初始化的toast組件本身占了一個位置】，而singleToast為false，因此可以創建）

第三步：使用

在main.js 添加如下代碼：

import toast from './components/toast/index'Vue.use(toast)

創建需要調用的Vue文件：

<template> <div>  <input type="button" value="顯示彈窗" @click="showToast"> </div></template> <script> export default {  methods: {   showToast () {    this.$toast({message:'加載中',type:'loading',position:'bottom',     duration:'2000'});    // this.$toast('成功提示');   }  } } </script>