【vue自定义组件】排名组件

前言

佛祖保佑, 永无bug。Hello 大家好!我是海的对岸!

有时我们在项目中要根据ui设计出的原型图,将原型图转变成具体的页面,里面用到的一些组件,不是现成可用的。这个时候就需要自己实现这些特定的组件。

这些组件是自己会用的,对自己来说可以算是通用的,可以拿来复用。

今天写一个排名组件,这个平时用的也比较多。也算是通用的

直接上代码

效果如下:

【vue自定义组件】排名组件_第1张图片

这个自定义组件 是基于 element-ui 中的 进度条组件 改造出来的



 

你觉得是不是这样就好了,不,我们要追究完美,你如果实际跑项目的话,会发现,页面一加载,首先会有个白屏,然后,过了一小会,数据才会加载出来,就是那种突的一下,数据就出来了,感官上面就会觉得很突兀。如果你真的调接口的话,突兀的感觉会更明显

所以这个时候,我们就通过element-ui中的loading 来做下过渡

扩展 1 —增加loading

【vue自定义组件】排名组件_第2张图片


 

简单解释一下: 真正开发中,肯定是要走接口的,我这边模拟一下,用的是mockNormal()方法临时顶一下,真正调接口,那就是走Function_GetData()方法

扩展 2 —配合自定义tab切换

有时候排名也是会和自定义tab切换 组合在一起来使用

效果如下:

【vue自定义组件】排名组件_第3张图片

自定义tab切换,如果有人不太清楚,可以开速瞄一眼:传送门

这里有一个算是优化的点可以说下,tab切换一般都是 每个tab对应一个页面,如果每个tab所对应的页面结构都是不一样的,那么每个tab单独写它所对应的页面。但是,如果每个tab对应的页面结构是一样的,那么就不用重复写了,直接改变这个结构中的数据即可。

本次的代码自定义tab切换,就简单粗暴的直接使用了v-show来做,因为本次的重点讲的是排名组件(其实是我懒,哈哈哈)

感兴趣的同学可以把这里的tab切换 改成 上一篇的自定义tab切换来尝试下



 

最后

整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

你可能感兴趣的