Vue元件開發
摘要：
在學習vue
的時候，發現有很多使用vue
開發的ui元件。本著學習的目的，自己也仿照Element
寫一些元件。
使用VuePress
編寫元件文件。
單元測試：karma
+mocha
+chai
+si...
在學習vue
的時候，發現有很多使用vue
開發的ui元件。本著學習的目的，自己也仿照Element
寫一些元件。
使用VuePress 編寫元件文件。
單元測試：karma
+mocha
+chai
+sinon
。
文件預覽地址：預覽連結
使用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>
完整程式碼請訪問:元件程式碼