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 EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
javascript时区函数介绍
Sep 14 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
Angular 容器部署的方法
Apr 17 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
vue--vuex详解
Apr 15 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入门速成(2)
2006/10/09 PHP
php google或baidu分页代码
2009/11/26 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
JavaScript之引用类型介绍
2012/08/10 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
js中Generator函数的深入讲解
2019/04/07 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
python实现报表自动化详解
2017/11/16 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
工程部经理岗位职责
2013/12/08 职场文书
给男朋友的道歉信
2014/01/12 职场文书
高中军训感言400字
2014/02/24 职场文书
文体活动总结范文
2014/05/05 职场文书
员工合理化建议书
2014/05/19 职场文书
班风口号
2014/06/18 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
小学远程教育工作总结
2015/08/13 职场文书
爱国主题班会教案
2015/08/14 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书