最简单的vue消息提示全局组件的方法
更新时间:2019年06月16日 11:28:35 作者:渣渣辉
这篇文章主要介绍了最简单的vue消息提示全局组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
简介
实现功能
- 自定义文本
- 自定义类型(默认,消息,成功,警告,危险)
- 自定义过渡时间
使用vue-cli3.0生成项目
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Vue中mintui的field实现blur和focus事件的方法
今天小编就为大家分享一篇Vue中mintui的field实现blur和focus事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08vue3+ts+elementui-plus二次封装弹框实战教程
这篇文章主要介绍了vue3+ts+elementui-plus二次封装弹框实战教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
在网站中普遍会遇到这样的需求,路由跳转前做一些验证,比如登录验证(未登录去登录页)。下面脚本之家小编给大家带来了使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能,感兴趣的朋友一起看看吧2018-03-03
最新评论