最简单的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 使用手册(七)
Sep 23 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
javascript实用方法总结
Feb 06 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
JavaScript switch语句使用方法简介
Dec 30 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
python 性能优化方法小结
2017/03/31 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
Python变量访问权限控制详解
2019/06/29 Python
Python collections模块使用方法详解
2019/08/28 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
python机器学习实现决策树
2019/11/11 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
2014迎新年晚会策划方案
2014/02/23 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
公司总经理任命书
2014/06/05 职场文书
学校欢迎标语
2014/06/18 职场文书
门面房租房协议书
2014/08/20 职场文书
2014年团总支工作总结
2014/11/21 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
MySQL 条件查询的常用操作
2022/04/28 MySQL