Vue组件开发

在学习vue的时候，发现有很多使用vue开发的ui组件。本着学习的目的，自己也仿照Element写一些组件。

使用VuePress编写组件文档。

单元测试：karma+mocha+chai+sinon。

文档预览地址：预览链接

使用VuePress编辑文档的代码访问：组件文档
关于VuePress使用方法：博客园、掘金

完整代码：组件代码

接下来就是编写组件，首先以常用的组件Button为例。

通过props属性接收父组件传递过来的值，并对传递过来的值进行类型验证。

props:{
    type:{
        type: String,
        validator (value) {
            return [
                'primary',
                'success',
                'info',
                'warning',
                'danger'
            ].indexOf(value)>-1;
        }
    },
    iconName:{
        type:String
    },
    iconSize:{
        type:String,
        default:'small'
    },
    iconPosition:{
        type: String,
        default: 'left',
        validator(value){
            return[
                'left',
                'right'
            ].indexOf(value)>-1
        }
    },
    circle:{
        type: Boolean
    },
    disabled:{
        type: Boolean
    }
}

通过 props接收父组件传递的值，可以实现各种功能不一样的button组件。

完整代码请访问:组件代码