vue 封装按钮button组件

最新推荐文章于 2025-04-16 09:40:05 发布

weixin_13031166945

最新推荐文章于 2025-04-16 09:40:05 发布

阅读量1.3k

点赞数 1

分类专栏： vue 前端插件 Web前端

本文链接：https://blog.youkuaiyun.com/weixin_41883384/article/details/112682298

版权

Web前端同时被 3 个专栏收录

71 篇文章

订阅专栏

vue

53 篇文章

订阅专栏

前端插件

6 篇文章

订阅专栏

本文档展示了如何在Vue项目中创建一个名为PlainButton的自定义组件。组件包含不同尺寸和样式的配置，如`primary`和`default`类型，并提供了点击事件处理。在`home.vue`文件中，组件被用于`榜单修改`和`过程监控`的按钮，显示了其在实际应用中的使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件放项目目录： 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,
  },
}