1.ClickOfftoClose有时，我们需要在用户点击元素外部时触发一个事件。最常见的用例是当您想要在单击时关闭下拉菜单或对话框。这是一个必不可少的包，我几乎在我构建的每个应用程序中都使用它。首选：vue-clickawayhttps://github.com/simplesmiler/vue-clickaway我一般会安装在main.js中，在我的app中使用。如果您只在一个或两个页面上使用它，您可能需要单独导入它。如果您单独导入，请记住指令需要在指令下公开。directives:{onClickaway}而不是components:components:{onClickaway}使其全局可用（在main.js中）：import{directiveasonClickaway}from'vue-clickaway'Vue.directive('on-clickaway',onClickaway)在模板中中间：假设我有一个包含li元素列表的完整选择框（此处未显示）。上面的按钮用于触发我的自定义选择框项目列表，当我在该元素外部单击时，它会触发一个关闭选项列表的方法。这比强制用户始终单击元素右上角的“X”按钮要好得多。我们只需将以下内容添加到按钮即可获得此功能：v-on-clickaway="closeMethodName"。注意：您应该始终在关闭方法中使用vue-clickaway，而不是切换方法。我的意思是这个连接到v-on-clickaway的方法应该是这样的：closeMethod(){this.showSomething=false}而不是这个：toggleMethod(){this.showSomething=!this.showSomething}如果你使用切换方法，那么每当您在该元素外部单击时，无论您单击什么，它都会一遍又一遍地打开然后关闭该元素。这很可能不是您想要的，因此请记住使用close方法来防止这种情况发生。2.Toasts（通知栏）首选：vue-toastificationhttps://maronato.github.io/vue-toastification/你有很多toast和类似通知的选项，但我是Maronato的vue-toastification的忠实粉丝。它提供了大量选项来涵盖您的大多数边缘情况，并且样式和动画带来了出色的用户体验，远远超过了其他软件包。Vue-toastification在其文档中提供了几种使用它的方法。如果您想显示基于状态或服务器相关操作的toast，您可以在组件级别、全局级别甚至在Vuex中执行此操作。全局使用（在main.js中）：importToastfrom'vue-toastification'//Toaststylesimport'vue-toastification/dist/index.css'Vue.use(Toast,{transition:'Vue-Toastification__bounce',maxToasts:3,newestOnTop:true,position:'top-right',timeout:2000,closeOnClick:true,pauseOnFocusLoss:true,pauseOnHover:false,draggable:true,draggablePercent:0.7,showCloseButtonOnHover:false,hideProgressBar:true,closeButton:'button',图标：true,rtl:false})您可以在每个组件中单独控制样式，但在上面的例子中，我在应用程序的任何地方都可用，这样我就不必每次都编写相同的选项属性。Vue-toastification有一个不错的在线演示，您可以在其中看到每个选项属性的结果，只需复制粘贴您想要的选项，就像我在上面所做的那样。方案一：在组件（模板）中使用Toast
