Vue.js实现一个漂亮,灵活,可复用的提示组件示例 - 行业资讯

这次的教程里,我们要把组件化进行到底!最近半年的几个项目中,都遇到了需要使用烤面包或者通知组件的情况。在目前已有的一些基于Vue.js开发的组件库,都没有找到太合适的,所以自己重头实现了一个。历经几个项目的磨练,这个提示组件的功能已经越来越完善,这次就分享一下组件以及其实现思路吧。

<强>深入组件化,组件的拆分,整合与复用
　　

Vue.js的组件化可以说是其招牌特性之一,而在实际应用时,并非一味地追求组件颗粒越小越好,而是需要根据项目的实际需求,来分析自己需要什么级别的组件。

例如在一个温泉中,我可能有主页,文章列表页,文章页,个人中心页4个主要的视图,于是我将其分别对应的写成4个组件。

但是在实际编写的过程中,发现他们共用了同一套侧边栏,而侧边栏对应的代码也在4个组件中重复书写了4次,所以可以将侧边栏单独写成一个组件进行复用。

之后,我们可能发现可以复用的还有一些表单,按钮之类的内容我们都可以复用成组件。但实际上,我们也会发现过度的组件化会导致代码量上升,开发时间增加以及额外的数据传递等等。所以如果不打算制作一个完整的组件库,那么在实际项目中做到按需拆分,整合即可,不用过分的追求每个可复用的部分都写成单个组件。

<强>为什么需要一个提示组件
　　

因为警报大部分时间不能满足我们的需求啊。往往项目里需要一个类似于警报的东西,用美观,可定制的方式提示用户一些信息,因此这样一个提示组件很有必要。

同时,我们也不希望同一时间出现多个提示混淆用户,因此在设计上,我们将提示组件设定为具有唯一性,整个应用中各个视图调用的都是同一个提示组件。

<强>给我代码
　　

接下来,由简入繁依次实现提示组件的各个功能。

<>强基本功能
　　

最基本的功能当然是触发后显示,并且能够以某种方式关闭。唯一需要自定义的部分,就是具体显示的内容,所以最开始组件长这样:

　　　　　　& lt; template> 　　& lt; div class="通知固定” 　　v="显示" 　　过渡=盎玫破北? 　　& lt; div类="删除" 　　@click=" close()“祝辞& lt;/div> 　　& lt; div类=澳谌荨北? 　　{{选项。内容}} 　　& lt;/div> 　　& lt;/div> 　　& lt;/template> 　　　　& lt; script> 　　出口默认{ 　　道具:{ 　　选择:{ 　　类型:对象, 　　默认值:()=比;{ 　　返回{} 　　} 　　}, 　　显示:{ 　　类型:布尔, 　　默认值:假　　} 　　}, 　　方法:{ 　　close () { 　　这一点。显示=false 　　这一点。选择={} 　　} 　　} 　　} 　　& lt;/script> 　　　　& lt;风格范围lang=叭埂北? 　　.slide-transition 　　过渡:所有。3 　　变换:translate3d (0, 0, 0) 　　.slide-enter, 　　.slide-leave 　　变换:translate3d (0、-100%、0) 　　delete 　　-moz-appearance:没有　　-webkit-appearance:没有　　背景:rgba(51岁,51岁,51岁,0.2) 　　光标:指针　　显示:inline-block 　　24 px高度: 　　位置:相对　　vertical-align:上　　24像素宽度: 　　浮:对　　之前,:, 　　及后: 　　背景:# fff 　　内容:“ 　　显示:块　　高度:2 px 　　左:50% 　　margin-left: -25% 　　margin-top: 1 px 　　位置:绝对的　　上图:50% 　　宽度:50% 　　和之前: 　　变换:旋转(45度) 　　及后: 　　变换:旋转(-45度) 　　和:徘徊　　背景:rgba(51岁,51岁,51岁,0.5) 　　.notification 　　宽度:100% 　　行高:2 　　z - index: 3 　　位置:固定　　上图:0 　　左:0 　　.content 　　填充:.75rem 2快速眼动　　& lt;/style> 　　　　之前　　　　

思路很简单、道具传递两个数据,显示用于控制显示,选择传入包括内容在内的自定义内容。为了让提示的显示更加自然,添加了一个滑动进入和离开的转变。

注意:这里的关闭按钮是通过css实现的,如果在你的项目中有对应的图标,可以将其替换掉。

在此处,也可以使用槽来进行内容的传递,但考虑到之后还有别的参数需要传递至组件内,一次用一个统一的对象选择进行传递。

<>强自定义样式
　　