本文實(shí)例為大家分享了vue toast彈框全局調(diào)用示例，供大家參考，具體內(nèi)容如下

創(chuàng)新互聯(lián)自成立以來，一直致力于為企業(yè)提供從網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、電子商務(wù)、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個性化軟件開發(fā)等基于互聯(lián)網(wǎng)的全面整合營銷服務(wù)。公司擁有豐富的網(wǎng)站建設(shè)和互聯(lián)網(wǎng)應(yīng)用系統(tǒng)開發(fā)管理經(jīng)驗(yàn)、成熟的應(yīng)用系統(tǒng)解決方案、優(yōu)秀的網(wǎng)站開發(fā)工程師團(tuán)隊(duì)及專業(yè)的網(wǎng)站設(shè)計(jì)師團(tuán)隊(duì)。

1.選新建一個toast.vue模板文件:

 <template>
 <transition :name="fadeIn">
  <div class="alertBox" v-show="show">
   <div class="alert-mask" v-show="isShowMask"></div>
   <transition :name="translate">
    <div class="box" :class="position" v-show="show">
     {{text}}
    </div>
   </transition>
  </div>
 </transition>
</template>

<script>
export default {
 data() {
  return {
  }
 },
 props: {
  show: { // 是否顯示此toast
   default: false
  },
  text: { // 提醒文字
   default: 'loading'
  },
  position: { // 提醒容器位置
   default: 'center'
  },
  isShowMask: { // 是否顯示遮罩層
   default: false
  },
  time: { // 顯示時(shí)間
   default: 1500
  },
  transition: { // 是否開啟動畫
   default: true
  }
 },
 mounted() { // 時(shí)間控制
  setTimeout(() => {
   this.show = false
  }, this.time)
 },
 computed: {
  translate() { // 根據(jù)props，生成相對應(yīng)的動畫
   if (!this.transition) {
    return ''
   } else {
    if (this.position === 'top') {
     return 'translate-top'
    } else if (this.position === 'middle') {
     return 'translate-middle'
    } else if (this.position === 'bottom') {
     return 'translate-bottom'
    }
   }
  },
  fadeIn() { // 同上
   if (!this.transition) {
    return ''
   } else {
    return 'fadeIn'
   }
  }
 }
}
</script>

<style>
 .box{
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  background: rgba(0,0,0,.5);
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size: 16px;
  z-index: 5000;
  color: #fff;
 }
 .box.top{
  top: 50px;
  margin-top: 0;
 }
 .box.center{
  top: 50%;
  margin-top: -100px;
 }
 .box.bottom{
  top: auto;
  bottom: 50px;
  margin-top: 0;
 }
 .alert-mask{
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,.5);
  z-index: 4999;
 }
 .fadeIn-enter-active, .fadeIn-leave-active{
  transition: opacity .3s;
 }
 .fadeIn-enter, .fadeIn-leave-active{
  opacity: 0;
 }
 .translate-top-enter-active, .translate-top-leave-active{
  transition: all 0.3s cubic-bezier(.36,.66,.04,1);
 }
 .translate-top-enter, .translate-top-leave-active{
  transform: translateY(-50%);
  opacity: 0;
 }
 .translate-middle-enter-active, .translate-middle-leave-active{
  transition: all 0.3s cubic-bezier(.36,.66,.04,1);
 }
 .translate-middle-enter, .translate-middle-leave-active{
  transform: translateY(80%);
  opacity: 0;
 }
 .translate-bottom-enter-active, .translate-bottom-leave-active{
  transition: all 0.3s cubic-bezier(.36,.66,.04,1);
 }
 .translate-bottom-enter, .translate-bottom-leave-active{
  transform: translateY(100%);
  opacity: 0;
 }
</style>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

名稱欄目：vue教程之toast彈框全局調(diào)用示例詳解-創(chuàng)新互聯(lián)
URL地址：http://m.rwnh.cn/article46/iideg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、關(guān)鍵詞優(yōu)化、微信小程序、搜索引擎優(yōu)化、網(wǎng)頁設(shè)計(jì)公司、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)