小编给大家分享一下vue-cli项目中如何使用公用的提示弹层tips或加载loading组件，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
项目结构，在组件文件夹(components)下新建common文件夹，所用公用组件放里面，本例包含tips和loading两个
一、loading组件
1.loading.vue组件内容如下：
代码：
<template>
<div class="loading" v-show="loading">
<img src="./loading.gif">
</div>
</template>
<script>
export default {
name: 'loading',
data() {
return {
loading: false
}
},
created() {
var that = this;
this.bus.$on('loading', function (data) {
that.loading = !!data;
})
}
}
</script>
<style scoped lang="scss">
.loading{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100 %;
height: 100 %;
color: #fff;
background - color: rgba(0, 0, 0, 0.8);
p {
padding: .15rem .15rem .2rem;
color: #fff;
font-size: .16rem;
}
img {
width: .4rem;
height: .4rem;
}
}
</style>2.app.vue中设置
<template>
<div id="app">
<router-view/>
<loading></loading>
</div>
</template>
<script>
import tips from '@/components/common/tips'
import loading from '@/components/common/loading'
export default {
name: 'App',
components:{tips,loading}
}
</script>在main.js中设置
Vue.prototype.bus = new Vue;3.在.vue组件中使用
// 显示loading
this.bus.$emit('loading', true);
// 关闭loading
this.bus.$emit('loading', false);效果如下
二、tips组件
1.内容：
代码：
<template>
<!-- 提示弹层 -->
<div class="tips" v-show="tips.show">
<h4>{{tips.title}}</h4>
</div>
</template>
<script>
export default {
name: 'tips',
data (){
return {
// 可以根据实际情况写更复杂的弹层，根据情况扩充tips即可
tips:{
show:false,
title:''
}
}
},
created () {
this.bus.$on('tips',(data)=>{
this.tips = data;
})
},
watch:{
// 检测tips变化，显示提示1.5s之后自动关闭，可根据实际情况自动修改时间
tips:function(){
if(this.tips.show){
setTimeout( ()=>{
this.tips.show = false;
},1500)
}
}
}
}
</script>
<style scoped lang="scss">
.tips{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
color: #fff;
h4{
padding: .1rem .2rem;
font-size: 12px;
line-height: 12px;
background-color: rgba(0,0,0,0.8);
border-radius: 4px;
}
}
</style>2.app.vue中设置
在main.js中设置
Vue.prototype.bus = new Vue;3.在.vue组件中使用
this.bus.$emit('tips', { show: true, title: '我是标题'})效果：
看完了这篇文章，相信你对“vue-cli项目中如何使用公用的提示弹层tips或加载loading组件”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！
