Vue自定义全局Toast和Loading的实例详解
程序员文章站
2022-05-26 11:42:55
如果我们的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的实例详解,希望对大家有所帮助
上一篇: 微信小程序传值以及获取值方法的详解
下一篇: php如何实现数据库的备份和恢复