首先在components中添加loading及Error的文件
// loading.vue
<template>
<div class="toast"
:class="{
'is-toast': !ShowLoading.show
}">
<div class="lang-mask_transparent"></div>
<div class="lang-toast">
<i class="lang-loading lang-icon_toast"></i>
<p class="lang-toast__content" style="color: #ffffff">{{ShowLoading.txt}}</p>
</div>
</div>
</template>
<script>
export default {
data () {
return {
ShowLoading: {
txt: '数据加载中', // 提示信息
show: false // 是否显示
}
}
},
methods: {
ShowLoadingFun (text) { // 提示弹窗
this.ShowLoading.txt = text || this.ShowLoading.txt
this.ShowLoading.show = true
},
HideLoadingFun () {
this.ShowLoading.show = false
}
}
}
</script>
<style lang="stylus">
.toast {
display: block;
}
.is-toast {
display: none;
}
.lang-toast {
position: fixed;
z-index: 999;
width: 240px;
height: 140px;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -120px;
background: rgba(17,17,17,0.7);
text-align: center;
border-radius: 5px;
color: #FFFFFF;
font-size: 24px;
}
.lang-icon_toast {
margin: 22px 0 0;
display: block;
&.lang-icon-success-no-circle{
&:before {
color: #FFFFFF;
font-size: 55px;
}
}
&.lang-loading{
margin:30px 0 10px;
width:38px;
height:38px;
vertical-align: baseline;
}
}
.lang-toast__content {
margin: 0 0 15px;
font-size: 24px;
color #fff
}
.lang-mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, .6);
}
.lang-mask_transparent{
position: fixed;
z-index: 10;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.lang-loading {
width:20px;
height:20px;
display: inline-block;
vertical-align: middle;
animation: langLoading 1s steps(12, end) infinite;
background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=') no-repeat;
background-size: 100%;
&.lang-loading_transparent{
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
}
}
@-webkit-keyframes langLoading {
0% {
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
@keyframes langLoading {
0% {
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
</style>
Error
<template>
<transition name="fades">
<div class="Errormes" v-if="Errormes.show">{{Errormes.txt}}</div>
</transition>
</template>
<script>
export default {
data () {
return {
Errormes: {
txt: '', // 提示信息
show: false // 是否显示
}
}
},
methods: {
ErrormesFun (oo) { // 提示弹窗
this.Errormes.txt = oo
this.Errormes.show = true
setTimeout(() => {
this.Errormes.show = false
}, 2000)
}
}
}
</script>
<style lang="stylus">
.fades-enter-active, .fades-leave-active {
transition: opacity .5s
}
.fades-enter, .fades-leave-active {
opacity: 0
}
/*提示弹框*/
.Errormes {
position: fixed;
top: 40%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 20px 30px;
background: rgba(0, 0, 0, .8);
border-radius: 16px;
color: #fff;
font-size: 28px;
z-index: 999;
max-width: 80%;
height: auto;
line-height: 60px;
text-align: center;
}
</style>
然后在index.js中完成挂载
import loading from './Loading'
import Errormes from './Errormes'
const Loading_ = {}
const Toast = {}
Loading_.install = function (Vue) {
const LoadingConstructor = Vue.extend(loading)
const instance = new LoadingConstructor()
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el)
Vue.prototype.$showLoading = msg => {
instance.ShowLoadingFun(msg)
}
Vue.prototype.$hideLoading = () => {
instance.HideLoadingFun()
}
}
Toast.install = function (Vue) {
// 创建一个Vue的“子类”组件
const ToastConstructor = Vue.extend(Errormes)
const instance = new ToastConstructor()
// 将这个实例挂载到动态创建的元素上,并将元素添加到全局结构中
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el)
// 在Vue的原型链上注册方法，控制组件
Vue.prototype.$toast = (msg, duration = 2000) => {
instance.Errormes.txt = msg
instance.Errormes.show = true
setTimeout(() => {
instance.Errormes.show = false
}, duration)
}
}
export {Loading_, Toast}
// main.js中
import { Loading_, Toast } from '@comp'
Vue.use(Loading_)
Vue.use(Toast)
this.$toast('最多可上传' + this.num + '张图片，请重新上传！')
this.$showLoading()
this.$hideLoading()
网友评论