Vue.js实现了一个漂亮、灵活且可重用的提示组件示例

在本教程中，我们应该进行组件化到底！近六个月来，有几个项目遇到了使用Toast或Notification组件的需求。目前已经有的一些基于Vue.js的组件库还没有找到合适的，所以我们又实现了一个。经过几个项目，这个提示组件的功能已经越来越完善了。这次让我们分享组件及其实现思想。

深入的组件化、组件拆分、集成和重用

Vue.js的组件化可以说是它的标志性特征之一，但在实际应用中，并不是一味追求组件粒子越小越好，而是需要根据项目的实际需求来分析自己需要什么级别的组件。

例如，在一个SPA中，我可能有四个主要视图：主页、文章列表页、文章页和个人中心页，所以我将它们分别写成四个组件。

但是在实际的编写过程中，发现他们共享了同一套侧边栏，侧边栏对应的代码在四个组件中编写了四次。因此，侧边栏可以作为一个组件来编写，以供重用。

之后，我们可能会发现有一些表单和按钮是可以重用的，我们可以将它们作为组件重用。但实际上，我们也发现过度的组件化会导致代码量、开发时间、额外的数据传输等增加。因此，如果您不打算制作一个完整的组件库，那么您可以在实际项目中根据需要对其进行拆分和集成，而不必过分追求将每个可重用的部分都写成一个组件。

为什么需要提示组件

因为机警大部分时间不能满足我们的需求。通常，项目需要类似于alert的东西，以一种美观且可定制的方式向用户提示一些信息，因此这样的提示组件是必要的。

同时，我们不希望多个提示同时混淆用户，所以在设计时，我们将提示组件设置为唯一的，整个应用程序中的所有视图都调用同一个提示组件。

给我看看密码

接下来，提示组件的各项功能由简单到复杂依次实现。

基本功能

当然最基本的功能是触发后显示，也可以通过某种方式关闭。唯一需要定制的部分是具体显示的内容。一开始，组件是这样的：

template div class=' notification fixed ' v-if=' show ' transition=' slide ' div class=' delete ' @ click=' close()'/div div class=' content ' { options . content } }/div/div/templatescript export default { props 3360 { options : { type : Object，default 3:()={ return } }，show: { type: Boolean，default: false } }，methods: { close滑动转换转换：所有. 3s容易转换：转换3d(0，0，0)。滑动输入。向左滑动变压器：平移3d(0，-100%，0)。delete-moz-apparence : none-web kit-apparence : none background : rgba(51，51，51，0.2)光标：指针显示：内嵌块高度： 24px位置：相对垂直对齐：顶部宽度： 24px浮动：右侧：be前，3:后background 3:通知宽度： 100%行高： 2 z-index: 3位置：固定顶部： 0左侧： 0。内容padd : 75 rem 2 rem/Style非常简单，道具传递两个数据，show用来控制显示，而options则传入包括内容在内的自定义内容。为了使提示显示更加自然，增加了滑入滑出的过渡。

注意：这里的关闭按钮是用css实现的。如果项目中有相应的图标，您可以替换它。

在这里，您也可以使用slot来传输内容，但是考虑到后面还有其他参数需要传输到组件中，所以一次使用一个统一的对象选项进行传输。

自定义样式

通常提示有很多种，有的是成功提示，有的是警告，有的是错误。因此，我们需要定义不同的风格来表达不同的内容。方法很简单。两个参数，背景颜色和文本颜色，在选项中传递。如果在组件中检测到传入的样式参数，它将替换默认样式。

Vue.js在处理动态样式时非常灵活。为了使代码更清晰，我没有选择内联动态样式，而是通过单独使用计算属性setStyle来设置它们：

computed : { setStyle(){ return { color : this . options . text color | | ' # fff '，Background:this。选项。backgroundColor | |' # 21e7b6'}}}这样，您可以通过在选项中同时传入textColor和backgroundColor属性来轻松自定义提示样式。

自动关闭的

很多情况下，我们希望提示在一定时间后可以自动关闭，所以组件也需要扩展一个自动关闭模式。同样，在“数据驱动”的思想下，我们应该提供一个数据来显示这个提示是否自动关闭。

选项中的AutoClose属性就是为了这个目的。同样，自动关机的延迟时间显然需要自定义，所以也增加了showTime属性。

自动关机本身并不太复杂，我们只需要用setTimeout来定义一个定时器。

首先是监控提示组件的显示。

在这里，我通过观察选项的变化来惩罚计时器。由于我们定义了关闭定时器的关闭方法，并且在关闭时重置show和options的值，所以当选项发生变化时，我们只需要判断options中的autoClose是否为真，就可以知道定时器是否需要启动。这里，倒计时方法被单独用于处理与定时器相关的操作。

添加以下代码：

data () { return { timers: [] }，methods: {倒计时(){ if(this . options . autoclose){ const t=setTimeout(()={ this . close()}，this . options . show time | | 3000)this . timers . push(t)} } }，Watch: {options () {this。计时器。foreach((计时器)={window。cleartimeout (timer)})这个。timers=[]这个。倒计时()}}如果你仔细看，你会发现这段代码中有一些奇怪的处理方式。我们定义了一个空的计时器数组，每次启动计时器时，我们都会将计时器存储在数组中。每次选项改变时，我们也会遍历计时器中的所有计时器并取消它们，然后清空计时器。

这种做法主要是为了避免在计时器结束前启动新的提示而导致的清除提示。比如没有这种处理，先发送自动关闭的提示，在自动关闭前发送新的提示。那么第一个提示的计时器仍然会错误地关闭新提示。

这个问题主要是因为我们所有的计时器都在同一个组件中，这本质上是同一个提示，所以我们需要清除计时器来避免冲突。组件库中许多类似的功能组件是通过为每个提示生成一个新的提示组件来实现的。但是，当多个提示连续出现时，它们会堆叠在一起并相互离开。

在之前的版本中，我的提示组件也采用了类似的设计方法，但是在最近的一个项目中，需要实现一个半透明的提示组件，叠加后提示文本看不清楚，所以采用了新的模式。

进一步扩展

然后，我在自动关机模式下扩展了一个倒计时条功能。没有使用Vue.js的过渡系统，而是使用了Cs3本身的动画系统。初始化自动关闭提示时，定时条增加样式，效果是X轴负向移动100%，通过计算属性对应设置过渡时间。具体实现可以参考源代码，这里就不赘述了。

增强灵活性

最后，提示组件变得更加灵活。有时，我们想要展示的可能是可定制样式的文本，或者超链接，甚至更多。而且Vue.js实现起来也不应该太简单。我们只需要将组件中用于呈现的{{ options.content }}更改为{{{ options.content }}}。对于带有三个大括号的模板，Vue.js会根据正常内容呈现其中的HTML标签。

这样，我们可以将任何HTML内容放入提示中。当然，我们必须注意避免用三重花括号将用户的输入渲染到模板中，以避免XSS攻击。

结合vuex

大多数时候，我们会将提示组件引入App.vue的根组件中，但发送提示的可能是组件树中的任何组件。如果不希望代码中出现各种调度和广播，引入vuex进行管理是一个很好的解决方案。

总体思路如下：

//store . jsconst state={ show : false，options : { autoclose : false，content : ' NOTICE content ' } } const突变={ NEW_NOTICE (state，options){ state . show=true state . options=options }，CLOSE _ NOTICE(state){ state . show=false state . options={ } }//Actions . jsexport const NEW NOTICE=({ dispatch }，options)} export const CLOSE NOTICE=({ 1 它调用notice，被引入到vuex中，可以根据上面的代码进行配置，this.notice({options})可以用来传输任何组件中的数据。 但是，由于vuex的单数据流特性，对状态数据的所有操作都必须通过动作调用突变来实现，包括提示组件中的closeNotice方法应该替换为动作中的closeNotice方法。

总结

通过这个提示组件，我们更加熟练地掌握了Vue.js的组件体系、数据传输、计算属性、过渡动画等特性。此外，该组件可以直接在生产环境中使用。欢迎来到明星，叉子和公关。

下载地址：jb51.rar

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。