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 选项卡效果 新手代码
Jul 08 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
React.js入门学习第一篇
Mar 30 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
vue与iframe之间的信息交互的实现
Apr 08 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
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
js中url对象化管理分析
2017/12/29 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
python 实现生成均匀分布的点
2019/12/05 Python
蒂娜商店:Tiina the Store
2019/12/07 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
摄影助理岗位职责
2014/02/07 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
党的群众路线调研报告
2014/11/03 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
办公用品质量保证书
2015/05/11 职场文书
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python