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 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
Angular2库初探
Mar 01 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
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 socket方式提交的post详解
2008/07/19 PHP
PHP脚本中include文件出错解决方法
2008/11/20 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
讲解Python中的标识运算符
2015/05/14 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
What is EJB
2016/07/22 面试题
计算机操作自荐信
2013/12/07 职场文书
降消项目实施方案
2014/03/30 职场文书
博士生导师推荐信
2014/07/08 职场文书
检讨书格式
2015/01/23 职场文书
2014年个人年终总结
2015/03/09 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
2016年教师节感言
2015/12/09 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
Java8中接口的新特性使用指南
2021/11/01 Java/Android
nginx配置之并发频次限制
2022/04/18 Servers