Skip to main content

Toast组件实现思路

1、组件UI及功能分析#

显示不同类型不同颜色的消息提示（类型：info、error、success）

2、基本实现#

首先是要让我们的Toast组件能够显示出来，且不消失，完成一个基本样式

通过.vue单文件组件的方式创建 toast.vue文件，即 Toast组件 ，在该文件的<template></template>中添加div或span或其他标签，然后将toast.vue文件在其他组件中引入并注册再进行后使用，运行后即可看到toast消息提示框

基本思路
组件的核心其实还是对原生标签的操作，只不过是我们在编写组件的时候，将一个复杂的功能在组件内部实现，然后暴>露一个简单的接口或者指令，当被人使用组件的时候就可以通过简单的接口或则指令轻松达到复杂目的

3、实现显示和消失#

3.1、需求#

点击按钮后显示该消息提示，一段时间后自动消息

3.2、自我问答(分析)#

Q: 怎么样才有易用性，应该要在进行某一操作的时候才创建toast并添加到页面中，像alert弹窗一样，所以要怎么动态生成一个toast组件（通过调用一个方法去实现），而不是先声明在页面中呢？

A: 请阅读vue官网如何开发一个插件：https://cn.vuejs.org/v2/guide/plugins.html

3.3、实现#

（1）、首先创建一个toast.js文件，在文件中暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象，然后再在方法中添加vue实例方法$Toast

（2）、导入toast.vue文件，在实例方法$Toast中，通过install方法中Vue参数调用构造器toast.vue变成构造函数，该构造函数中的propsData参数即是toast.vue中的props对象，然后在该vue实例方法中将toast实例挂载到内容再添加到页面

toast.js
import JToast from "./toast.vue"let toastexport default {    install(Vue, options) {        Vue.prototype.$Toast = function (value) {            if (toast) {                toast.close()            }            let Constructor = Vue.extend(JToast)            toast = new Constructor({                propsData: value            })
            toast.$mount()            document.body.appendChild(toast.$el)        }    }}</script>
<style lang="scss" scoped></style>
demo.vue在demo中引入toast插件注册后使用
import Vue from "vue"
import JToast from "./components/Toast/Toast.js"
new Vue({    el: "#app",    methods: {        infoToast() {            this.$Toast({ type: "info", delay: 5, msg: "提示信息" })        },        errorToast() {            this.$Toast({ type: "error", delay: 5, msg: "错误" })        }        , successToast() {            this.$Toast({ type: "success", delay: 5, msg: "成功" })        },    }})
文章目录