Vue组件开发

栏目: 编程语言 · 发布时间: 5年前

内容简介:在学习使用单元测试:

在学习 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>

完整代码请访问: 组件代码


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

当下的启蒙

当下的启蒙

[美] 史迪芬·平克 / 侯新智、欧阳明亮、魏薇 / 浙江人民出版社 / 2018-12 / 159.90

[编辑推荐] ● 比尔•盖茨最喜爱的一本书。理查德·道金斯心中的诺贝尔文学奖作品。尤瓦尔•赫拉利2018年最爱的书之一。 ● 当代最伟大思想家史蒂芬·平克全面超越自我的巅峰之作,一部关于人类进步的英雄史诗。 ●《当下的启蒙》用数据和事实揭示出世界的真相:不是黑暗,而是光明;不是丧,而是燃;我们没有退步,而是一直在进步,还将继续进步。用这本书点燃生活的勇气,亲手创造更美好的未来。 ......一起来看看 《当下的启蒙》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具