最简单的vue消息提示全局组件的方法


Posted in Javascript onJune 16, 2019

简介

实现功能

  • 自定义文本
  • 自定义类型(默认,消息,成功,警告,危险)
  • 自定义过渡时间

使用vue-cli3.0生成项目

最简单的vue消息提示全局组件的方法

最简单的vue消息提示全局组件的方法

toast全局组件编写

/src/toast/toast.vue

<template>
 <div class="app-toast"
    v-if="isShow"
    :class="{'info': type=== 'info','success': type=== 'success','wraning': type=== 'wraning','danger': type=== 'danger'}">{{text}}</div>
</template>
<style scoped>
.app-toast {
 position: fixed;
 left: 50%;
 top: 50%;
 background: #ccc;
 padding: 10px;
 border-radius: 5px;
 transform: translate(-50%, -50%);
 color: #fff;
}
.info {
 background: #00aaee;
}
.success {
 background: #00ee6b;
}
.wraning {
 background: #eea300;
}
.danger {
 background: #ee000c;
}
</style>

/src/toast/index.js

import vue from 'vue'
import toastComponent from './toast.vue'

// 组件构造器,构造出一个 vue组件实例
const ToastConstructor = vue.extend(toastComponent)

function showToast ({ text, type, duration = 2000 }) {
 const toastDom = new ToastConstructor({
  el: document.createElement('div'),
  data () {
   return {
    isShow: true, // 是否显示
    text: text, // 文本内容
    type: type // 类型
   }
  }
 })
 // 添加节点
 document.body.appendChild(toastDom.$el)
 // 过渡时间
 setTimeout(() => {
  toastDom.isShow = false
 }, duration)
}
// 全局注册
function registryToast () {
 vue.prototype.$toast = showToast
}

export default registryToast

全局注册

/main.js

import toastRegistry from './toast/index'
Vue.use(toastRegistry)

调用

/src/views/home.vue

<template>
 <div class="home">
  <input type="button"
      value="显示弹窗"
      @click="showToast">
 </div>
</template>

<script>

export default {
 name: 'home',
 methods: {
  showToast () {
   this.$toast({
    text: '我是消息'
    // type: 'wraning',
    // duration: 3000
   })
  }
 }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 #Javascript
详解vue微信网页授权最终解决方案
Jun 16 #Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 #Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 #Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 #Javascript
简谈创建React Component的几种方式
Jun 15 #Javascript
JS中的一些常用的函数式编程术语
Jun 15 #Javascript
You might like
php中的比较运算符详解
2013/10/28 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
php时间戳转换代码详解
2019/08/04 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Python global全局变量函数详解
2018/09/18 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
四种会话跟踪技术
2015/05/20 面试题
服装销售人员求职自我评价
2013/09/26 职场文书
物流管理专业推荐信
2014/09/06 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS