Vue2.0进阶组件篇2 解析饿了么（spinner组件）

作者 混元霹雳手-ziksang

前两天一个同学问我想叫我写了一个spinner组件，那OK我就是那么能满足大家的口味，如果写一个spinner组件，别看一个小小的组件如何去写，很多人问我vuex，vue-router怎么玩，这东西有什么好玩的，看看api文档就可以去玩了，然后我就看看了饿了么spinner组件的写法，他是如何去组织自己的代码结构的
因为饿了么的spinner组件本质上是基于px来写的，我经常会遇到一个问题，我用的是rem怎么办，px毕竟还是不适配，那只有拿出我的开山釜自己打造一个rem版本的，如果有饿了么开发人员看到我这文章，虽然小弟我没办法和你们肩并肩一起打造组件，那我就借鉴一下，人在江湖走那有不被抄。

接下来还是按着我们约定的来
关于组件篇我就直接拿demo再进行细化分析给大家讲一些细节的知识点，我相信会更有意思一点，为什么我要把基础给大家讲的那么详细呢，因为基础打的好组件才写的好
1.本文分享 解析饿了么（spinner组件）

2.代码运行vue-cli 2.1版本

3.组件代码都在components文件夹里

4.主代码逻辑都在 App.vue文件夹里

我什么都不要我只要

赞

饿了么向外爆露出三个接口
color ： 颜色 size ： 大小 type ： 样式类型

首先index.html,先用rem布局，原理略知一二，就不多说了,反正就是移动端给你做适配

    
    
    
    



    

    


复制代码

接下来我们在components写spinner组件，这里我就写两个组件一个是snake，和double-bounce

首先我们在components先写一个snake，我们先创建一个spinner文件夹，就单个type形式的如何写，既然教大家了，就一步一步来写，写的麻烦点就麻烦点。

我的文件目录是在components里创了一个=》zk-spinner文件夹=》又创建了一个src文件夹=>又创建了一个snake.vue文件
components/zk-spinner/src/snake.vue

复制代码

App.vue

复制代码

你会发现一个小蛇就在来回的转啊转，很漂亮，这里只用到了向外暴露的两处一个是color,一个是颜色，这里用的是compunted来计算返回给template模板里，这时好处是什么呢，可以用默认样式，还可以用自己定样式
this.color || this.$parent.color || 'red'
(this.size || this.$parent.size || .44)+'rem'
这里代表如果自己没有设定样式则用父元素的样式，父元素没有样式，则用默认样式，你后续会发现 this.color 和 this.size和默认就是根本没有任何用的东西，这里设计的就是一个并句，回头看到后面我再给大家分析

我们再来写一个double-bounce样式
components/zk-spinner/src/double-bounce.vue

复制代码

App.vue

复制代码

此时你会发现一个东西，其实本质上，做再多样spinner样式，只要去基于css3写一些东西，就可以了，我们可以借鉴前两天掘进里有一个人发的什么7种loading样式，我的收藏夹里有，你们可以去找一下，按照里面的样式，你可以做更多spinner
里面很多东西都是换汤不要药，从两个spinner里可以发现computed和props里面共用的都是同样的，那现在我有只有两个spinner，如果我现在有十个spinner可提供给大家用的，那启不是要写十下，基于编程思想，我要还是要抽取出来，我们提取到common.vue里

components/zk-spinner/src/common.js

export default {
    computed: {
        spinnerColor() {
            return this.color || this.$parent.color || 'red'
        },
        spinnerSize() {
            return (this.size || this.$parent.size || .6) + 'rem'
        }
    },
    props: {
        color: String,
        size: Number
    }
}复制代码

现在问题来了，我们现在有两个组件，一个是snack，和 double-bounce,我们要更完善一点，再把他们两个挂到一个组件上，那就用到了动态组件，is来进行改造

复制代码

App.vue