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 相关文章推荐
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
Vue图片裁剪组件实例代码
Jul 02 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
介绍几个array库的新函数 php
2006/12/29 PHP
php入门教程 精简版
2009/12/13 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
帝国cms常用标签汇总
2015/07/06 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
python 异步async库的使用说明
2020/05/04 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
幼儿园教育教学反思
2014/01/31 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
好媳妇事迹材料
2014/12/24 职场文书
安全承诺书
2015/01/19 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript