内容简介:在学习使用单元测试:
在学习 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>
完整代码请访问: 组件代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Serverless 组件开发尝试:全局变量组件和单独部署组件
- UI组件库从1到N开发心得-组件篇
- PJBreedsViewController 组件开发总结
- PJPickerView 组件开发总结
- Laravel 后台开发常用组件
- 组件化开发与黑箱
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。