Vue元件開發

qfstudy發表於2019-03-10
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>

複製程式碼

完整程式碼請訪問:元件程式碼

相關文章