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

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

分为三步：

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

在上述代码中，动态添加了类名控制按钮大小；背景直接使用动态绑定；在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的类名样式

效果如下：