vue的全局提示框组件实例代码


Posted in Javascript onFebruary 26, 2018

这篇文章给大家介绍一个vue全局提示框组件,具体代码如下所示:

<template>
   <!-- 全局提示框 -->
   <div v-show="visible" class="dialog-tips dialog-center">
     <div>{{message}}</div>
   </div>
</template>
<script>
export default {
 data() {
  return {
   visible: false,
   message: ""
  };
 }
};
</script>
<style lang="scss">
.dialog-tips{
  position: fixed;
  z-index: 100;
  min-width: 220px;
  padding: 40px 22px;
  white-space: nowrap;
  background-color: #fff;
  box-shadow: 0px 8px 15px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  .dialog-tips-icon{
    width: 54px;
    height: 54px;
    @extend %bg-contain;
    display: inline-block;
    margin-bottom: 13px;
  }
}
.dialog-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
</style>

toast.js

import ToastComponent from './toast.vue'
const Toast = {};
// 注册Toast
Toast.install = function (Vue) {
  // 生成一个Vue的子类
  // 同时这个子类也就是组件
  const ToastConstructor = Vue.extend(ToastComponent)
  // 生成一个该子类的实例
  const instance = new ToastConstructor();
  // 将这个实例挂载在我创建的div上
  // 并将此div加入全局挂载点内部
  instance.$mount(document.createElement('div'))
  document.body.appendChild(instance.$el)
  // 通过Vue的原型注册一个方法
  // 让所有实例共享这个方法 
  Vue.prototype.$toast = (msg, duration = 1500) => {
    instance.message = msg;
    instance.visible = true;
    setTimeout(() => {
      instance.visible = false;
    }, duration);
  }
}
export default Toast

如何使用?

在main.js中

 import Vue from 'vue'
import Toast from './toast' 

Vue.use(Toast);

在component中

this.$toast("XXXXXXXXX");

总结

以上所述是小编给大家介绍的vue的全局提示框组件实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
js播放wav文件(源码)
Apr 22 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
Angular4 ElementRef的应用
Feb 26 #Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 #Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 #Javascript
vue bus全局事件中心简单Demo详解
Feb 26 #Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 #Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 #Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 #Javascript
You might like
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
php的字符串用法小结
2010/06/08 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
Javascript 遍历对象中的子对象
2009/07/03 Javascript
学习ExtJS 访问容器对象
2009/10/07 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
复习Python中的字符串知识点
2015/04/14 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
django中嵌套的try-except实例
2020/05/21 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
英国电子专家:maplin
2019/09/04 全球购物
商务英语专业求职信范文
2014/01/28 职场文书
施工协议书范本
2014/04/22 职场文书
工商管理专业自荐信
2014/06/03 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
标准单位租车协议书
2014/09/23 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server