button组件

组件基本代码

<template>
    <button
        class="tls-button"
        :class="[`tls-button-${type}`,{'is-plain':plain,'is-round':round,'is-circle':circle,'is-disabled':disabled}]"
        @click="handleClick"
        :disabled="disabled"
    >
        <i v-if="icon" :class="icon"></i>
        <span v-if="$slots.default">
            <slot></slot>
        </span>
    </button>
</template>

组件可接受的参数props

type

按钮类型

        type: {
            type: String, //数据类型
            default: "" //默认值
        },

plain

是否朴素按钮

        plain: {
            type: Boolean,
            default: false
        },

round

是否有圆角

        round: {
            type: Boolean,
            default: false
        },

circle

是否圆形

        circle: {
            type: Boolean,
            default: false
        },

disabled

是否可以点击

        disabled: {
            type: Boolean,
            default: false
        }

这里不止改变样式，也要给组件的button添加disable属性

icon

附带icon

        icon: {
            type: String,
            default: ""
        },

icon可以直接上阿里巴巴图标库下载，然后在main.js引用

import '@/assets/font_icon/iconfont.css'

$slots.default判断父组件是否有往插槽放东西，需要与icon的样式做一下兼容，如果有传，给icon与内容之间加点间距

组件事件

    handleClick(e) {
        //  提交事件  供父组件接收
        this.$emit("click", e);
    }

注册组件

在main.js里面注册组件，因为后面会陆续注册，我这里直接用数组循环注册。这里的name是指我们在写组件时给组件定义的name属性

import button from './components/button.vue'
const componentArr = [button]
componentArr.forEach(item => {
    Vue.component(item.name, item)
})

这样写也一样

import button from './components/button.vue'
Vue.component(button.name,button)

组件样式

 :class="[`tls-button-${type}`,{'is-plain':plain,'is-round':round,'is-circle':circle,'is-disabled':disabled}]

这里用的是数组形式，这个看大家个人喜好，用对象或者直接用字符串拼接都可以,具体写法请移步官网

element-ui的源码设计有用scss里面的函数/方法写的，这个之前说过，还不太会用，就先用最low的写法 css这里就不写了（因为button组件的css有点多），需要的话可以直接到github这里拿,目前css还是有点多，而且还没有抽出来，到时候再看情况把css抽出来

怎么用

可以直接在任意一个.vue文件里面直接用了

<tls-button @click="test" type="primary" disabled>按钮</tls-button>

这里需要什么属性就自己添加

README.md(组件使用说明文档)

button组件

事件名称	触发	返回值
handleClick	点击	点击元素

为什么那么像element-ui的样式？因为我就是看视频加element-ui写的(用element-ui不香吗？香，好吧！但是就是想自己弄一下玩)，不喜勿喷，下面附上github地址 tls-ui