这个 $toast()了解一下？

前言

在通常的开发过程中，我们总是先编写一个组件，然后将其导入到所需的页面中，但是如果它是以下类型的组件呢

上面这种类型的浮动层提示有一个很大的特点，就是使用非常频繁，几乎每个页面都会用到，所以我们需要把这个组件引入到每个页面中，并且要通过每个页面中的一个变量来控制它的显示和隐藏，这显然不是我们想要的。那我们想要什么？用过一些UI框架的同学应该知道有这样一个用法：

这个。$ toast({持续时间： 3000，内容： '这是消息提示' })；没错，这是一个简单的句子，一切都会好的(只需用js调用组件)。那么这种效果是如何实现的呢？今天就让我们(手牵手)一探究竟吧！

先验知识

不知道朋友们有没有用过Vue.extend()，但我很少接触过，印象也不深，简单了解一下Vue.extend()主要是做什么用的。先说官方解释(不多，坚持):

我真的不明白。没关系，没关系，你只需要记住(补充一点理解)以下用法：

//导入上一个公共组件“从Main导入”。/main . vue '；//使用Vue.extend创建组件的模板(构造函数)让main构造函数=vue . extend(main)；//实例化组件让实例=new main constructor()；//挂载在相应的元素实例上。$ mount(' # app ')；不知道大家是否理解，上面的Vue.extend(Main)是一个基于main.vue的组件模板(构造函数)，instance是一个实例化的组件，$mount()表示手工挂载。其中，Vue.extend()和$mount()是通过js调用、呈现和挂载组件的本质，相当于早期的createElement和appendChild，具有相同的效果。我们需要熟悉这一点，这样你就可以停下来反复思考。

添加：如果$mount()中没有参数，则意味着组件只呈现在页面上，而不挂载在页面上。如果有正确的(元素)参数，它将直接安装在元素下面。

写祝酒词

调用Js调用，仍然需要原始组件，但我们不会将它们导入页面。好了，让我们简单地用开头的吐司图片来编写这个vue组件(消息和警报是一样的)。下面是直接的代码，毕竟它的结构太简单了，不是本章的重点：

！-main . vue-template div class=' toast ' p server错误，请稍后再试。/p/div/templatescriptexportdefault { name : ' toast '，挂载后(){settimeout ()={//3s，删除组件this。$ el。parentnode。removechild(此。$ El)；}, 3000);}};/script style lang=' SCS ' scoped . toast { display : flex；align-items:居中；justice-content : center；位置：固定；top : 0；bottom : 0；left : 0；right : 0；color: # fffz-index : 9999；背景：透明；p { padding: 12px 22pxfont-size : 18px；border-radius : 4px；背景： rgba(17，17，17，0.7)；}}/style上面的内容大家应该都懂，所以我在这里就直接说说下面的重点。

写一个main.js

我们在main.vue的同级目录下创建一个新的main.js文件我们先来看一下文档的内容(不多，已经是最简单的版本了):

//main.jsimport Vue来自“Vue”；//之所以引入Vue，是因为使用了方法Vue.extend()从“”导入Main。/main . vue '；//引入toast组件让toast构造函数=vue . extend(main)；//这是在前面关于let实例的前置知识内容中提到的；const Toast=function(){ instance=new Toast constructor()。$ mount()；//Render组件document.body.appendchild(实例。$ El)；//安装在车身下方}；导出默认的Toast。上面的代码公开了一个Toast函数。为什么要公开一个函数？原因很简单：想一想，我们是否会根据这个来调用一个组件。$toast()终于来了。说白了，通过js调用本质上就是调用一个函数。也就是说，这个。$Toast()执行上面代码中导出的导出默认Toast，也就是它执行的是Toast函数(const Toast=function() {})，所以当我们调用这个的时候。$toast()，我们实际上执行了toast()函数。Toast()功能只做一件事：通过手动安装将组件安装在车身下方。

补充：一般来说，我们通常挂载$ ('#app ')，也就是我们在#app下挂载组件，路由器-view/也包含在#app中，但是我们的toast提示放在正文下面，也就是不受#app和路由器-view/控制，所以我们切换页面(路由)的时候，这个toast组件

这里顺便给出每个组件的目录结构，如下图所示：

开始打电话

调用方法非常简单。首先，我们向入口文件main.js添加两行代码(与上面不同)，这样我们就可以在需要的地方直接用js调用它，如下图所示：

然后在页面上进行测试，如下所示：

运行代码：

是的，很好，有点成功的感觉。

支持可传输参数

别担心，我们好像错过了什么。顺便说一下，还不支持参数传递。称之为。$toast()直接只能显示——3354个服务器错误。请稍后再试(都是后端锅)。但是我们是一个有追求的前端，所以我们不应该局限于此，所以现在让我们尝试添加接下来的两个可配置参数。这里，拿时长和内容当栗子。

首先我们要修改main.vue组件的内容(其实没有什么大的变化)，就像下面这样：

！- main.vue可配置版本-template div class=' toast ' p { { content } }/p/div/template script//主要更改了数据导出默认值{name :' toast '，data () {return {content 3360 ' '，duration : 3000 }；}，挂载(){ setTimeout(()={ this。$el.parentNode.removeChild(这。$ El)；}，this . duration)；}};上面的代码/脚本应该很容易理解。接下来，让我们看看main.js中的变化：

//main.js可配置版本从' Vue '导入Vue；从“”导入Main。/main . vue '；让toast constructor=vue . extend(Main)；让实例；const toast=function(options={ }){//此处做了修改，增加了一个options参数实例=new toast构造函数({ data : options//此处的数据会转移到main.vue组件中的数据，也可以用props编写})；document.body.appendChild(实例。$mount()。$ El)；};导出默认的Toast实际上，main.js没有太大变化，只是在函数中添加了一个参数。需要注意的是，New Toast构造函数({data: options})中的数据是main中的数据。Vue组件，而不是随便取的字段名，传入的选项将与组件中的数据合并(vue的信用)。em .是的，就这么简单。现在让我们继续称之为：

Scriptexport默认{methods : {show toast () {this。$ toast ({content : '哈哈哈，消失的贼快'，duration : 500 })；} }};/script运行一次，您可以看到：

当然，这还没有结束。让我们继续添加一个小功能点。

这个。支持$toast.error()

在此，我们打算支持这一点。$toast.error()和这个。$toast.success()，所以第一步是修改main.vue文件的内容(主要是根据类型值修改组件的样式)，如下所示：

！-main . vue-template div class=' toast ' : class=' type？` toast-$ { type } ` : ' ' ' p { { content } }/p/div/templatescriptexport default {.data() { return { type: ' '，content: ' '，duration : 3000 }；},};/script style lang=' SCS ' scoped . toast {.-错误p { background: rgba(255，0，0，0.5)；}-success p { background : rgba(0，255，0，0.5)；}}/style其次，这个。$Toast.error()实际上相当于Toast.error()，所以我们现在的目的是将方法扩展到Toast函数，这相对简单。在解释之前，让我们先看看代码：

//main . jsconst Toast=function(options={ }){ 0.};//下面是对Toast函数['success '，' error']中的两个方法['success '，' error']进行扩展。foreach(type={ toast[type]=options={ options . type=type；返回Toast(选项)；};});导出默认的Toast我们可以看到，Toast.error()和Toast.success()最后调用了Toast(options)函数，但是在调用之前还需要再做一步，就是把['success '，' error']作为类型参数，然后传入options，仅此而已。然后试试效果：

script export default { methods : { show toast(){ this。$ toast ({content3360 '这很正常' })；}，showerrtoast(){ this。烤面包。错误({content: '意外失败' })；}，showsuccesstoast(){ this。烤面包。成功({content: '实际成功' })；} }};/脚本

赞美是无限的，伟大的。太棒了。没有。新疆。

结论

至此，一个由js调用的简单toast组件完成了，几行简短的代码测试了js。当然，这只是一个超简单的演示，显然不够完善和健壮，所以我们可以在此基础上进行扩展。例如，当duration=0时，我们让这个toast一直显示，然后扩展一个close方法来关闭它。然而，实践是检验真理的唯一标准，这仍然是一句老话。论文总会觉得肤浅，永远不知道这件事要实践。一步一个脚印，一天一天向上！

以上是对vuetis用法的详细解释和整合。$ toast()由边肖介绍，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！