一、基础准备工作

1、创建一个基础的vue项目包

2、创建components文件夹，用于存放组件，新建button.vue组件，可以自己取个名字

<script>
export default {
  name: "CatButton",
};
</script>

3、在main.js中引入组件

import CatButton from "./components/button.vue";
Vue.component(CatButton.name, CatButton);

4、App.vue中使用组件

<Cat-button>按钮</Cat-button>

二、button组件结构搭建

       需要传入的文字内容：采用插槽占位，如果没有文字就不显示插槽，通过 $slots.default 进行判断

        按钮可传入图标：事先准备好字体图标文件，放在assets目录下，在main.js中引入（）

        按钮的点击事件，通过 this.$emit 传递

        需要传入的参数：

        type：按钮样式

        plain：是否朴素按钮

        round：圆角边框

        circle：圆

        icon：图标

        disabled：是否禁用

页面效果：

       

button.vue 具体代码如下，style样式太多，不逐一列出了，可根据需求自己定义： 

<template>
  <button
    class="cat-button"
    :class="[
      `cat-button-${type}`,
      {
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle,
        'is-disabled': disabled,
      },
    ]"
    :disabled="disabled"
    @click="handleclick"
  >
    <i v-if="icon" :class="icon"></i>
    <!-- i和span之间要有间隙，如果没有span就没有间隙，所以做一下判断 -->
    <!-- $slots.default：可以得到使用的插槽 -->
    <span v-if="$slots.default"> <slot></slot></span>
  </button>
</template>

<script>
export default {
  name: "CatButton",
  props: {
    type: {
      type: String,
      default: "default",
    },
    plain: {
      type: Boolean,
      default: false,
    },
    round: {
      type: Boolean,
      default: false,
    },
    circle: {
      type: Boolean,
      default: false,
    },
    icon: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleclick(e) {
      this.$emit("click", e);
    },
  },
};
</script>

  App.vue使用button组件：

<template>
  <div>
    <div class="row">
      <Cat-button type="primary" @click="fn">primary</Cat-button>
      <Cat-button type="success">success</Cat-button>
      <Cat-button type="warning">warning</Cat-button>
      <Cat-button type="info">info</Cat-button>
      <Cat-button type="danger">danger</Cat-button>
    </div>
    <div class="row">
      <Cat-button plain type="primary">primary</Cat-button>
      <Cat-button plain type="success">success</Cat-button>
      <Cat-button plain type="warning">warning</Cat-button>
      <Cat-button plain type="info">info</Cat-button>
      <Cat-button plain type="danger">danger</Cat-button>
    </div>
    <div class="row">
      <Cat-button round type="primary">primary</Cat-button>
      <Cat-button round type="success">success</Cat-button>
      <Cat-button round type="warning">warning</Cat-button>
      <Cat-button round type="info">info</Cat-button>
      <Cat-button round type="danger">danger</Cat-button>
    </div>
    <div class="row">
      <Cat-button circle type="primary">1</Cat-button>
      <Cat-button circle type="success">2</Cat-button>
      <Cat-button circle type="warning">3</Cat-button>
      <Cat-button circle type="info">4</Cat-button>
      <Cat-button circle type="danger">5</Cat-button>
    </div>
    <div class="row">
      <Cat-button icon="cat-icon-check" type="primary">文字</Cat-button>
      <Cat-button circle icon="cat-icon-check" type="success"></Cat-button>
      <Cat-button circle icon="cat-icon-check" type="warning"></Cat-button>
      <Cat-button circle icon="cat-icon-check" type="info"></Cat-button>
      <Cat-button circle icon="cat-icon-check" type="danger"></Cat-button>
    </div>
    <div class="row">
      <Cat-button disabled type="primary">1</Cat-button>
      <Cat-button disabled type="success">2</Cat-button>
      <Cat-button disabled type="warning">3</Cat-button>
      <Cat-button disabled type="info">4</Cat-button>
      <Cat-button disabled type="danger">5</Cat-button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fn() {
      console.log(123);
    },
  },
};
</script>

<style lang="scss" scoped>
.row {
  margin-bottom: 20px;
}
.cat-button {
  margin-right: 10px !important;
}
</style>