最简单的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 相关文章推荐
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
Angular5.1新功能分享
Dec 21 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 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实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
python处理圆角图片、圆形图片的例子
2014/04/25 Python
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
Python闭包实现计数器的方法
2015/05/05 Python
详解使用python crontab设置linux定时任务
2016/12/08 Python
Java及python正则表达式详解
2017/12/27 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
优秀员工自荐书
2013/12/19 职场文书
支教自我鉴定
2014/01/18 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
装修施工安全责任书
2014/07/24 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
吴仁宝观后感
2015/06/09 职场文书
在职证明书模板
2015/06/15 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电