项目目录
1. toast.js
1 import ToastComponent from '@/components/Toast' 2 3 let $vm 4 5 export default { 6 install (Vue) { 7 if (!$vm) { 8 const ToastPlugin = Vue.extend(ToastComponent) 9 $vm = new ToastPlugin({ 10 el: document.createElement('div') 11 }) 12 document.body.appendChild($vm.$el) 13 } 14 $vm.show = false 15 let toast = { 16 show (txt) { 17 $vm.content = txt 18 $vm.show = true 19 }, 20 hide () { 21 $vm.show = false 22 } 23 } 24 if (!Vue.$toast) { 25 Vue.$toast = toast 26 } 27 Vue.mixin({ 28 created () { 29 this.$toast = Vue.$toast 30 } 31 }) 32 } 33 }
Toast.vue
1 <template> 2 <div 3 class="toast_info animated" 4 v-show="show" 5 :class="[{fadeIn:show}, {fadeOut: !show}]"> 6 <div class="toast_content">{{content}}</div> 7 </div> 8 </template> 9 10 <script> 11 export default { 12 name: 'Toast', 13 props: { 14 show: Boolean, 15 content: { 16 type: String, 17 default: '提示信息' 18 } 19 }, 20 watch: { 21 show () { 22 clearTimeout(this.timer) 23 this.timer = setTimeout(() => { 24 this.show = false 25 }, 2000) 26 } 27 } 28 } 29 </script> 30 31 <style scoped> 32 .toast_info{ 33 position: fixed; 34 left: 50%; 35 top: 50%; 36 transform: translate(-50%, -50%); 37 -webkit-transform: translate(-50%, -50%); 38 background: rgba(0, 0, 0, 0.7); 39 color: #fff; 40 border-radius: 8px; 41 max-width: 200px; 42 padding: 10px 20px; 43 text-align: center; 44 word-break: break-all; 45 } 46 .toast_content{ 47 font-size: 12px; 48 } 49 .animated { 50 -webkit-animation-duration: 1s; 51 animation-duration: 1s; 52 -webkit-animation-fill-mode: both; 53 animation-fill-mode: both; 54 } 55 @-webkit-keyframes fadeIn { 56 from { 57 opacity: 0; 58 } 59 60 to { 61 opacity: 1; 62 } 63 } 64 65 @keyframes fadeIn { 66 from { 67 opacity: 0; 68 } 69 70 to { 71 opacity: 1; 72 } 73 } 74 75 .fadeIn { 76 -webkit-animation-name: fadeIn; 77 animation-name: fadeIn; 78 } 79 @-webkit-keyframes fadeOut { 80 from { 81 opacity: 1; 82 } 83 84 to { 85 opacity: 0; 86 } 87 } 88 89 @keyframes fadeOut { 90 from { 91 opacity: 1; 92 } 93 94 to { 95 opacity: 0; 96 } 97 } 98 99 .fadeOut { 100 -webkit-animation-name: fadeOut; 101 animation-name: fadeOut; 102 } 103 </style>
main.js
1 // The Vue build version to load with the `import` command 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 import Vue from 'vue' 4 import App from './App' 5 import router from './router' 6 import toast from './plugins/toast' 7 import loading from './plugins/loading' 8 9 Vue.config.productionTip = false 10 Vue.use(toast) 11 Vue.use(loading) 12 13 /* eslint-disable no-new */ 14 new Vue({ 15 el: '#app', 16 router, 17 components: { App }, 18 template: '<App/>' 19 })
home.vue
1 <template> 2 <div>home 3 <div @click="toastClick">toast</div> 4 <div @click="loadingClick">loading</div> 5 </div> 6 </template> 7 8 <script> 9 export default { 10 name: 'Home', 11 mounted () { 12 // this.$loading.show() 13 }, 14 methods: { 15 toastClick () { 16 console.log('123') 17 this.$toast.show('大风反对撒风的放大放大反对撒风') 18 }, 19 loadingClick () { 20 console.log('456') 21 this.$loading.show() 22 } 23 } 24 } 25 </script> 26 27 <style> 28 </style>
注：toast的default文字未生效
Loading.vue
1 <template> 2 <div class="loading_main" v-show="show"> 3 <div class="loading_wrapper"></div> 4 <div 5 class="loading_info animated" 6 :class="[{fadeIn:show}, {fadeOut: !show}]"> 7 <img :src="loadingIcon" width="50" height="50" alt="加载中"> 8 <div class="loading_content">{{textTip}}</div> 9 </div> 10 </div> 11 </template> 12 13 <script> 14 export default { 15 name: 'Loading', 16 props: { 17 show: Boolean, 18 textTip: { 19 type: String, 20 default: '加载中……' 21 }, 22 imgType: { 23 type: String, 24 default: 'six' 25 } 26 }, 27 watch: { 28 show () { 29 clearTimeout(this.timer) 30 this.timer = setTimeout(() => { 31 this.show = false 32 }, 2000) 33 } 34 }, 35 computed: { 36 loadingIcon () { 37 return require(`./svg/loading-${this.imgType}.svg`) 38 } 39 } 40 } 41 </script> 42 43 <style scoped> 44 .loading_main{ 45 width: 100%; 46 height: 100%; 47 position: absolute; 48 top: 0; 49 left: 0; 50 right: 0; 51 background: rgba(0, 0, 0, 0) 52 } 53 .loading_info{ 54 position: fixed; 55 left: 50%; 56 top: 50%; 57 transform: translate(-50%, -50%); 58 -webkit-transform: translate(-50%, -50%); 59 background: rgba(0, 0, 0, 0.7); 60 color: #fff; 61 border-radius: 8px; 62 max-width: 200px; 63 padding: 10px 20px; 64 text-align: center; 65 word-break: break-all; 66 } 67 .loading_content{ 68 font-size: 12px; 69 } 70 .animated { 71 -webkit-animation-duration: 1s; 72 animation-duration: 1s; 73 -webkit-animation-fill-mode: both; 74 animation-fill-mode: both; 75 } 76 @-webkit-keyframes fadeIn { 77 from { 78 opacity: 0; 79 } 80 81 to { 82 opacity: 1; 83 } 84 } 85 86 @keyframes fadeIn { 87 from { 88 opacity: 0; 89 } 90 91 to { 92 opacity: 1; 93 } 94 } 95 96 .fadeIn { 97 -webkit-animation-name: fadeIn; 98 animation-name: fadeIn; 99 } 100 @-webkit-keyframes fadeOut { 101 from { 102 opacity: 1; 103 } 104 105 to { 106 opacity: 0; 107 } 108 } 109 110 @keyframes fadeOut { 111 from { 112 opacity: 1; 113 } 114 115 to { 116 opacity: 0; 117 } 118 } 119 120 .fadeOut { 121 -webkit-animation-name: fadeOut; 122 animation-name: fadeOut; 123 } 124 </style>
loading.js
1 import LoadingComponent from '@/components/Loading/Loading' 2 3 let $vm 4 5 export default { 6 install (Vue) { 7 if (!$vm) { 8 const LoadingPlugin = Vue.extend(LoadingComponent) 9 $vm = new LoadingPlugin({ 10 el: document.createElement('div') 11 }) 12 document.body.appendChild($vm.$el) 13 } 14 $vm.show = false 15 let loading = { 16 show () { 17 $vm.show = true 18 }, 19 hide () { 20 $vm.show = false 21 } 22 } 23 if (!Vue.$loading) { 24 Vue.$loading = loading 25 } 26 Vue.mixin({ 27 created () { 28 this.$loading = Vue.$loading 29 } 30 }) 31 } 32 }
参考文档
https://www.jianshu.com/p/180bf559339d