vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解


Posted in Javascript onMay 28, 2018

项目结构,在组件文件夹(components)下新建common文件夹,所用公用组件放里面,本例包含tips和loading两个

vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

一、loading组件

    1.loading.vue组件内容如下:

vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

代码:

<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中设置

vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

<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-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

Vue.prototype.bus = new Vue;

3.在.vue组件中使用    

// 显示loading
this.bus.$emit('loading', true);
// 关闭loading
this.bus.$emit('loading', false);

效果如下

vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

二、tips组件

1.内容:

vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

代码:

<template>
 <!-- 提示弹层 -->
 <div class="tips" v-show="tips.show">
 <h3>{{tips.title}}</h3> 
 </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;
 h3{
 padding: .1rem .2rem;
 font-size: 12px;
 line-height: 12px;
 background-color: rgba(0,0,0,0.8);
 border-radius: 4px;
 }
}
</style>

2.app.vue中设置

vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

在main.js中设置

vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

Vue.prototype.bus = new Vue;

3.在.vue组件中使用

this.bus.$emit('tips', { show: true, title: '我是标题'})

效果:

vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

本例使用的tips内容比较简单,想实现复杂的扩充即可,实现方法是一样的

其他公共组件实现方法类似

总结

以上所述是小编给大家介绍的vue-cli项目中使用公用的提示弹层tips或加载loading组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 #jQuery
JavaScript继承定义与用法实践分析
May 28 #Javascript
关于jquery中attr()和prop()方法的区别
May 28 #jQuery
JS数组去重常用方法实例小结【4种方法】
May 28 #Javascript
jQuery中将json数据显示到页面表格的方法
May 27 #jQuery
javascript少儿编程关于返回值的函数内容
May 27 #Javascript
《javascript少儿编程》location术语总结
May 27 #Javascript
You might like
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
JS控制表格隔行变色
2006/06/26 Javascript
javascript 类方法定义还是有点区别
2009/04/15 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
Ubuntu下安装PyV8
2016/03/13 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
浅谈python之新式类
2018/08/12 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
python的Jenkins接口调用方式
2020/05/12 Python
高山背包:High Sierra
2017/11/23 全球购物
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
小学清明节活动总结
2014/07/04 职场文书
股指期货心得体会
2014/09/10 职场文书
2014年实验室工作总结
2014/12/03 职场文书
焦点访谈观后感
2015/06/11 职场文书
在职证明范本
2015/06/15 职场文书
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python