Vue.js实现一个漂亮、灵活、可复用的提示组件示

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

Vue.js实现一个漂亮、灵活、可复用的提示组件示

深入组件化,组件的拆分、整合与复用

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

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

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

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

为什么需要一个提示组件

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

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

Show me the code

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

基本功能

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

<template> <div v-if="show" transition="slide"> <div @click="close()"></div> <div> {{ options.content }} </div> </div> </template> <script> export default { props: { options: { type: Object, default: () => { return {} } }, show: { type: Boolean, default: false } }, methods: { close () { this.show = false this.options = {} } } } </script> <style scoped lang="sass"> .slide-transition transition: all .3s ease transform: translate3d(0, 0, 0) .slide-enter, .slide-leave transform: translate3d(0, -100%, 0) .delete -moz-appearance: none -webkit-appearance: none background: rgba(51,51,51,0.2) cursor: pointer display: inline-block height: 24px position: relative vertical-align: top width: 24px float: right &:before, &:after background: #fff content: "" display: block height: 2px left: 50% margin-left: -25% margin-top: -1px position: absolute top: 50% width: 50% &:before transform: rotate(45deg) &:after transform: rotate(-45deg) &:hover background: rgba(51,51,51,0.5) .notification width: 100% line-height: 2 z-index: 3 position: fixed top: 0 left: 0 .content padding: .75rem 2rem </style>

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

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

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

自定义样式

通常提示的内容种类很多,有的是成功提示,有的是警告,有的则是报错。因此我们需要定义不同的样式以表达不同的内容。方法很简单,在options中传入背景色和文字颜色两个参数,如果组件中检测到了传入的样式参数,就用其替换默认样式。

Vue.js在处理动态样式时非常灵活,为了让代码更清晰,我没有选择将动态样式内联,而是单独使用一个计算属性setStyle进行设定:

computed: { setStyle () { return { color: this.options.textColor || '#fff', background: this.options.backgroundColor || '#21e7b6' } } }

这样一来,只要在options中一并传入textColor和backgroundColor两个属性,就可以轻松自定义提示样式了。

自动关闭

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwwwpy.html