如何实现Vue中消息提示的全局组件方法调用？

本文共计526个文字，预计阅读时间需要3分钟。

简介：简述项目的基本情况。

实现功能：介绍项目实现的主要功能。

自定义文本：定义项目中的个性化文本内容。

自定义类型（默认，消息，成功，警告，危险）：设定不同类型的通知风格。

自定义过渡时间：调整通知显示与隐藏的过渡效果持续时间。

使用vue-cli3.0生成项目：利用vue-cli3.0工具创建项目。

toast全局组件编写：创建toast全局通知组件。

路径：/src/toast/toast.vue

template： {{ cl }}

简介

实现功能

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

使用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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。