尝试封装基础组件-button

前言

在业务仔的生活中，经常就是使用各种组件去堆页面。使用第三方的组件库，有时候不能满足项目的样式需求，所以需要封装项目的基础组件库，本文所写的就是一个简单的小案例。

基础组件的三个APi

1. 属性prop
   

2. 事件event
   

3. 插槽slot
   

举个例子

实现基础组件

1. 明确功能
   

2. 逻辑处理
   

3. css样式
   

代码

Demo

<template>
    <div class="base-button-container" :class="[{'disabled':disabled}]" :style="{'margin':margin}">
        <button style="width: 100%;height: 100%" @click="$emit('click')" :class="[type,'base']" :disabled="disabled">
            <span>{{label}}</span>
        </button>
    </div>
</template>

<script>
  export default {
    name: "base-button",
    props:{
        label:{
          type:String,
          default:'确认'
        },
        type:{
          type:String,
          default:'primary'
        },
        disabled:{
            type:Boolean,
            default:false
        },
        margin:{
            type:String,
            default:"5px"
        }
    },
    data(){
      return{

      }
    },

  }
</script>

<style lang="scss" scoped>
    .base-button-container{
        height: 40px;
        width: 98px;
        color: #ffffff;
        font-size: 16px;
        border-radius: 4px;
    }

    .base{
        border-radius: 4px;
        outline: none;
        cursor: pointer;
        text-align: center;
        color: white;
        z-index: 99999;
        border: 1px solid #dcdfe6;

    }

    .disabled{
        background-color:#DCDCDC;
        cursor: not-allowed;
    }

    .primary{
        background-color: $blue-1;
        &:hover{
            background-color: $blue-1;
            border-color: $blue-1;
        }
        &:active{
            background-color: $blue-2;
        }

        &:disabled{
            background-color:#DCDCDC;
            border: 1px solid #ebeef5;
            cursor: not-allowed;
        }
    }

    .danger{
        background-color: $red-1;
        &:hover{
            background-color: $red-1;
            border-color:$red-1;
        }
        &:active{
            background-color: $red-2;
        }

        &:disabled{
            background-color:#DCDCDC;
            border: 1px solid #ebeef5;
            cursor: not-allowed;
        }
    }

    .success{
        background-color: $green-1;
        &:hover{
            background-color: $green-1;
            border-color:$green-1;
        }
        &:active{
            background-color: $green-2;
        }

        &:disabled{
            background-color:#DCDCDC;
            border: 1px solid #ebeef5;
            cursor: not-allowed;
        }
    }
</style>

样式参照elementUi按钮的样式，需要在组件中接收type来指定class

功能设想

目前实现的这个button的Demo涵盖的功能其实并不全面，参照elementUi,button组件中应该存在图标，加载效果。同时为了满足基本需求，也应该加上防抖的操作，避免用户误操作。

总结

业务仔也应该自己动手封装组件，虽然可能封装的组件在功能或者实现的方法上面存在缺陷，但是慢慢来。本文写的只是一个很简单的Demo，对于大佬们可能没有什么帮助，但是如果对一些xdm有那么一丢丢的帮助我也满足了。