最简单的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 相关文章推荐
$.format,jquery.format 使用说明
Jul 13 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
Node.js引入UIBootstrap的方法示例
May 11 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
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
python实现目录树生成示例
2014/03/28 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
献爱心标语
2014/06/21 职场文书
文秘自荐信
2014/06/28 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
个人投资合作协议书
2014/10/12 职场文书
清明节寄语2015
2015/03/23 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
python - timeit 时间模块
2021/04/06 Python
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
小程序实现文字循环滚动动画
2021/06/14 Javascript
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
小程序实现侧滑删除功能
2022/06/25 Javascript