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

前言

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

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

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

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

直接上代码

效果如下：

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

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

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

扩展 1 —增加loading

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

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

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

效果如下：

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

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

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

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

最后

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

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