vue 封装 按钮button组件

组件放项目目录 ： src/components 下面

PlainButton组件

    效果图

 

    index.js 文件

export { default } from "./PlainButton.vue";

 

 PlainButton.vue

<template>
  <button :class="[size, type]">
    <span v-if="slots.default"><slot /></span>
  </button>
</template>
<script>
export default {
  name: "PlainButton",
  props: {
    size: {
      type: String,
      required: false,
      default: "normal"
    },
    type: {
      type: String,
      required: false,
      default: "default"
    }
  },
  // data() {
  //   return {
  //     slots
  //   };
  // },
  computed: {
    slots() {
      return this.$slots
    }
  },
  // setup(props, { slots }) {
  //   return { slots };
  // }
};
</script>
<style lang="less" scoped>
button {
  padding: 0 7px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  outline: 0;
  user-select: none;
  touch-action: manipulation;
  span {
    display: inline-block;
    pointer-events: none;
  }
  &.primary {
    color: #1890ff;
    background: #e6f7ff;
    border: 1px solid #91d5ff;
    &:hover {
      color: #fff;
      background-color: #1890ff;
      border-color: #096dd9;
    }
  }
  &.default {
    background: #f5f5f5;
    border: 1px solid #d9d9d9;
    color: rgba(#000, 85);
    &:hover {
      border: 1px solid #1890ff;
      color: #1890ff;
    }
  }
}
.large {
  height: 40px;
}
.normal {
  height: 32px;
}
.small {
  height: 24px;
}
</style>

 

home.vue

<template>
  <div class="pd20">
     <div class="btns">
        <PlainButton size="small" type="primary" @click="handleEdit"
          >榜单修改</PlainButton
        >
        <PlainButton
          size="small"
          type="primary"
          class="ml10"
          @click="handleMonitor"
          >过程监控</PlainButton
        >
      </div>
</div>
</template>

<script>
import PlainButton from "@/components/PlainButton";

export default {
  name: "ranking",
  components: {
    PlainButton,
  },
}