这次的教程里,我们要把组件化进行到底!最近半年的几个项目中,都遇到了需要使用烤面包或者通知组件的情况。在目前已有的一些基于Vue.js开发的组件库,都没有找到太合适的,所以自己重头实现了一个。历经几个项目的磨练,这个提示组件的功能已经越来越完善,这次就分享一下组件以及其实现思路吧。
GitHub仓库:https://github.com/Yuyz0112/vue-notie
演示地址:http://lab.myriptide.com/vue-notie/
<强>深入组件化,组件的拆分,整合与复用强>
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实现的,如果在你的项目中有对应的图标,可以将其替换掉。
在此处,也可以使用槽来进行内容的传递,但考虑到之后还有别的参数需要传递至组件内,一次用一个统一的对象选择进行传递。
vue.js的提示组件