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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
详解jQuery中的事件
Dec 14 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
Nuxt.js实战详解
Jan 18 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
微信小程序实现文件预览
Oct 22 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页面间参数传递的四种方法详解
2013/06/09 PHP
初识PHP
2014/09/28 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
php处理带有中文URL的方法
2016/07/11 PHP
php实现URL加密解密的方法
2016/11/17 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
jquery对表单操作2
2011/04/06 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
Python类定义和类继承详解
2015/05/08 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
MYSQL支持事务吗
2013/08/09 面试题
你懂得怎么写自荐信吗?
2013/12/27 职场文书
生日派对邀请函
2014/01/13 职场文书
学校四群教育实施方案
2014/06/12 职场文书
财产保全担保书
2015/01/20 职场文书
解除同居协议书
2015/01/29 职场文书
小学生学习保证书
2015/02/26 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
爱心募捐通知范文
2015/04/27 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android