Vue自定义全局Toast和Loading的实例详解
2019-05-25 18:02
1661 查看
如果我们的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的实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
- vue自定义全局共用函数详解
- 对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
- vue 自定义全局方法,在组件里面的使用介绍
- vue自定义全局组件(自定义插件)的用法
- Vue中自定义全局组件的实现方法
- 浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
- 详解vue使用vue-layer-mobile组件实现toast,loading效果
- vue.js中toast用法及使用toast弹框的实例代码
- vue 自定义提示框(Toast)组件的实现代码
- vue的toast弹窗组件实例详解
- vue教程之toast弹框全局调用示例详解
- 详解Vue项目中出现Loading chunk {n} failed问题的解决方法
- Vue 全局loading组件实例详解
- Vue中的无限加载vue-infinite-loading的方法
- vue实现图片加载完成前的loading组件方法
- vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
相关文章推荐
- Vue 全局loading组件实例详解
- vue自定义全局共用函数详解
- Vue自定义toast组件的实例代码
- 详解vue使用vue-layer-mobile组件实现toast,loading效果
- vue教程之toast弹框全局调用示例详解
- vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
- Vue组件全局注册实现警告框的实例详解
- Vue 自定义动态组件实例详解
- 详解Vue.use自定义自己的全局组件
- vue的toast弹窗组件实例详解
- 自定义vue全局组件use使用、vuex的使用详解
- vue全局使用axios的方法实例详解
- 微信小程序 Toast自定义实例详解
- vue全局使用axios的方法实例详解
- Vue实例中生命周期created和mounted的区别详解
- vue 自定义全局方法,在组件里面的使用介绍
- Vue父子组件之间的通信实例详解
- Android 自定义标题栏的实例详解
- 详解:数据库名、实例名、ORACLE_SID、数据库域名、全局数据库名、服务名
- ORACLE详解:数据库名、实例名、ORACLE_SID、数据库域名、全局数据库名、服务名(转)