网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

如果我们的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="/UploadFiles/2021-04-02/loading.png')">

(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的实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

上一篇:Vue 进阶之路(三)
下一篇:javascript数据类型中的一些小知识点(推荐)
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap