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组件。

<template>
    <button @click="handleclick" class="vi-button" :disabled="disabled" :class=buttonclass>
        <span class="vi-button-wrapper" :class=wrapperclass>
            <span v-if="iconname" class="vi-button-icon">
                <vi-icon :viiconname="iconname" :viiconsize="iconsize"></vi-icon>
            </span>
            <span class="vi-button-content">
                <slot></slot>
            </span>
        </span>
    </button>
</template>
 
<script>
export default {
    name: 'vibutton',
    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
        }
    },
    methods: {
        handleclick(event) {
            this.$emit('click', event);
        }
    },
    computed:{
        buttonclass(){
            return {
                [`vi-button-${this.type}`]:this.type,
                [`vi-button-disabled`]:this.disabled,
                [`vi-button-circle`]:this.circle
            }
        },
        wrapperclass(){
            return {
                [`vi-button-${this.iconposition}`]:this.iconname&&this.iconposition
            }
        }
    }
}
</script>

完整代码请访问: