欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue自定义全局Toast和Loading的实例详解

程序员文章站 2023-02-02 16:15:01
如果我们的vue项目中没有用到任何ui框架的话,为了更好的用户体验,肯定会用到loading和toast。那么我们就自定义这两个组件吧。 1、toast组件 首先,在c...

如果我们的vue项目中没有用到任何ui框架的话,为了更好的用户体验,肯定会用到loading和toast。那么我们就自定义这两个组件吧。

1、toast组件

首先,在common下新建global文件夹,存放我们的toast.vue和toast.js两个文件(当然文件的具体位置你可以自行安排)。

(1). toast.vue

<template lang="html">
 <div v-if="isshowtoast" class="toast-container" @touchmove.prevent>
  <!-- 这里content为双花括号 -->
  <span class="loading-txt">{content}</span>
 </div>
</template>

<script>
export default {
 data () {
  return {
   isshowtoast: true,
   content: ''
  }
 }
}
</script>

<!-- add "scoped" attribute to limit css to this component only -->
<style scoped>
.toast-container {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(255, 255, 255, 0.1);
}
.toast-msg {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 60%;
 padding: 35px;
 border-radius: 10px;
 font-size: 28px;
 line-height: 36px;
 background: #eee;
 color: #666;
}
</style>

(2). toast.js

import vue from 'vue'
import toastcomponent from './toast.vue'

const toast = {}
let showtoast = false // 存储loading显示状态
let toastnode = null // 存储loading节点元素
const toastconstructor = vue.extend(toastcomponent)

toast.install = function (vue, options) {
 // 参数
 var opt = {
  duration: '1200'
 }
 for (var property in options) {
  opt[property] = options[property]
 }
 vue.prototype.$toast = function (tips, type) {
  if (type === 'hide') {
   toastnode.isshowtoast = showtoast = false
  } else {
   if (showtoast) {
    // 如果toast还在,则不再执行
    return
   }
   toastnode = new toastconstructor({
    data: {
     isshowtoast: showtoast,
     content: tips
    }
   })
   toastnode.$mount() // 挂在实例,为了获取下面的toastnode.$el
   document.body.appendchild(toastnode.$el)
   toastnode.isshowtoast = showtoast = true
   settimeout(function () {
    toastnode.isshowtoast = showtoast = false
   }, opt.duration)
  }
 };

 ['show', 'hide'].foreach(function (type) {
  vue.prototype.$toast[type] = function (tips) {
   return vue.prototype.$toast(tips, type)
  }
 })
}

export default toast

然后,我们需要把写好的组件在 /src/main.js 中引用一下。

import toast from './components/common/global/toast'
vue.use(toast)

最后,怎么使用呢?只需在要用的地方this.$toast.show('hello world')

2、loading组件

loading组件只需要照着toast组件搬过来,稍微改下就可以了。

首先,在common下新建global文件夹,存放我们的loading.vue和loading.js两个文件。

(1). loading.vue

<template lang="html">
 <div v-if="isshowloading" class="loading-container">
  <div class="loading-box">
   <img class="loading-img" :src="require('../../../assets/images/loading.png')">
   <!-- 这里content为双花括号 -->
   <span class="loading-txt">{content}</span>
  </div>
 </div>
</template>

<script>
export default {
 data () {
  return {
   isshowloading: false,
   content: ''
  }
 }
}
</script>

<!-- add "scoped" attribute to limit css to this component only -->
<style scoped>
.loading-container {
 display: flex;
 justify-content: center;
 align-items: center;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0);
 z-index: 1000;
}
.loading-box {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 width: 150px;
 height: 150px;
 border-radius: 10px;
 background: #e5e5e5;
}
.loading-img {
 width: 70px;
 height: 70px;
 animation: rotating 2s linear infinite;
}
@keyframes rotating {
 0% {
  transform: rotate(0deg);
 }
 100% {
  transform: rotate(1turn);
 }
}
.loading-txt {
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 24px;
 color: #666;
}
</style>

(2). loading.js

import vue from 'vue'
import loadingcomponent from './loading.vue'

const loading = {}
let showloading = false // 存储loading显示状态
let loadingnode = null // 存储loading节点元素
const loadingconstructor = vue.extend(loadingcomponent)

loading.install = function (vue) {
 vue.prototype.$loading = function (tips, type) {
  if (type === 'hide') {
   loadingnode.isshowloading = showloading = false
  } else {
   if (showloading) {
    // 如果loading还在,则不再执行
    return
   }
   loadingnode = new loadingconstructor({
    data: {
     isshowloading: showloading,
     content: tips
    }
   })
   loadingnode.$mount() // 挂在实例,为了获取下面的loadingnode.$el
   document.body.appendchild(loadingnode.$el)
   loadingnode.isshowloading = showloading = true
  }
 };

 ['show', 'hide'].foreach(function (type) {
  vue.prototype.$loading[type] = function (tips) {
   return vue.prototype.$loading(tips, type)
  }
 })
}

export default loading

然后,在 /src/main.js 中引用一下loading组件。

import loading from './components/common/global/loading'
vue.use(loading)

最后,只需在要用的地方this.$loading.show('hello world')、 this.$loading.hide()

总结

以上所述是小编给大家介绍的vue自定义全局toast和loading的实例详解,希望对大家有所帮助