vue实现Button按钮基本的封装并全局使用

在button中封装了按钮的背景颜色，大小，是否可点击的功能；首先看效果图：禁用按钮不可点击

分为三步：

首先创建一个button组件： ButtonComponent，在ButtonComponent组件中复制如下代码：

<template>
  <div class="lx_button">
    <button :class="{lx_btn_large: largeBtn, lx_btn_small: smallBtn, lx_btn_big: bigBtn, lx_btn_color: btnColor}" @click="click" :style="{ backgroundColor: bgColorData }" :disabled="isDisabled">
      <slot></slot>
    </button>
  </div>
</template>

<script>
export default {
  name: 'ButtonComponent',
  data() {
    return {
      bgColorData: '', // 按钮背景色
      largeBtn: false, // 超小按钮 class
      smallBtn: false,  // 控制小按钮的class
      bigBtn: false, // 控制大按钮的class
      defaultBtn: false, //默认按钮大小
      isDisabled: false, // 是否禁用
      btnColor: false // color
    }
  },
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'default'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    switch(this.type) {
      case 'primary':
        this.bgColorData = '#57a3f3'
        this.btnColor = true
        break;
      case 'error': 
        this.bgColorData = '#f16643'
        this.btnColor = true
        break;
      case 'warning': 
        this.bgColorData = '#ffad33'
        this.btnColor = true
        break;
      case 'success': 
        this.bgColorData = '#47cb89'
        this.btnColor = true
        break;
      case 'info': 
        this.bgColorData = '#57c5f7'
        this.btnColor = true
        break;
    }
    switch(this.size) {
      case 'large': 
        this.largeBtn = true
        break;
      case 'small':
        this.smallBtn = true
        break;
      case 'big':
        this.bigBtn = true
        break;
    }
    switch(this.disabled) {
      case true:
        this.isDisabled = true
        this.btnColor = true
        break;
    }
  },
  methods: {
    click() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped lang="less">
.lx_button {
  margin-right: 12px;
  float: left;
  button {
    background-color: #fff;
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    padding: 0 15px;
    border-color: #ccc !important;
    color: #333;
    text-align: center;
    outline: none;
    border: 1px solid transparent;
    cursor: pointer;
    border-radius: 8px;
    white-space: nowrap;
    user-select: none;
    &:disabled {
      background-color: #c0bebe !important;
      cursor: not-allowed;
    }
  }
}
.lx_button .lx_btn_large {
    height: 24px;
    font-size: 12px;
    line-height: 24px;
    padding: 0 5px;
  }
.lx_button .lx_btn_small {
  height: 28px;
  font-size: 12px;
  line-height: 28px;
  padding: 0 8px;
}
.lx_button .lx_btn_big {
  height: 36px;
  line-height: 36px;
  padding: 0 18px;
  font-size: 14px;
}
.lx_button .lx_btn_color {
  color: #fff;
}
</style>

在上述代码中，动态添加了类名控制按钮大小；背景直接使用动态绑定；在props中接收父组件传递的背景，按钮大小和是否可点击；并添加了一个自定义点击事件click；在mounted中判断父组件传过来的值做判断，没有传值就选择默认的值；

第二步：在mian.js中，全局注册组件：

import Vue from 'vue'
import Button from './components/ButtonComponent.vue'
Vue.component('lx-button', Button)

此时可以用 lx-button 作为组件名使用

第三步：使用组件，在父组件中，传递了type背景色，size按钮大小，还有disabled是否禁用，父组件没有传递就是默认按钮default的类名样式

<template>
  <div id="app">
    <lx-loading :message="message" :loading="loading"></lx-loading>
    <lx-button @click="save" size="large" type="error">错误</lx-button>
    <lx-button @click="save" size="small" type="warning">警告</lx-button>
    <lx-button @click="save" type="error" disabled>禁用</lx-button>
    <lx-button @click="save" type="info">info</lx-button>
    <lx-button @click="save" size="big" type="success">成功</lx-button>
    <lx-button @click="save">默认按钮</lx-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    
    }
  },
}
</script>

<style>
</style>

效果如下：