在學習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>
複製程式碼完整程式碼請訪問:元件程式碼