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 相关文章推荐
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
全面解析JavaScript Module模式
Jul 24 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实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
Python中偏函数用法示例
2018/06/07 Python
详解python Todo清单实战
2018/11/01 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
应用化学专业职业生涯规划书
2013/12/31 职场文书
高一家长会邀请函
2014/01/12 职场文书
美术教学感言
2014/02/22 职场文书
物流管理专业自荐信
2014/06/23 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
运动会加油稿100字
2014/09/19 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
新闻稿怎么写
2015/07/18 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js