Vue 组件库 Button实现

最新推荐文章于 2024-07-22 22:17:24 发布

aminwangaa

最新推荐文章于 2024-07-22 22:17:24 发布

阅读量215

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/aminwangaa/article/details/129236423

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该文章展示了如何实现一个Vue组件，功能类似于AntDesignVue的Button组件，支持图标、加载状态、不同尺寸和颜色类型，以及禁用状态。组件通过props接收参数，并使用计算属性和方法处理交互逻辑。样式通过CSS定义，提供了多种预设样式。

摘要由CSDN通过智能技术生成

Vue 组件库 Button实现

下面是一个类似于Ant Design Vue的Button组件的实现，支持传入图标、loading等状态。

<template>
  <button class="btn" :class="classes" :disabled="disabled" @click="onClick">
    <i v-if="icon" :class="['iconfont', `icon-${icon}`]"></i>
    <span v-if="!loading"><slot></slot></span>
    <span v-else><i class="iconfont icon-loading"></i></span>
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'medium'
    },
    icon: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    classes() {
      return [
        `btn-${this.type}`,
        `btn-${this.size}`
      ]
    }
  },
  methods: {
    onClick() {
      if (!this.loading && !this.disabled) {
        this.$emit('click')
      }
    }
  }
}
</script>

<style scoped>
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  outline: none;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
}

.btn-default {
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
}

.btn-primary {
  background-color: #1890ff;
  color: #fff;
}

.btn-success {
  background-color: #52c41a;
  color: #fff;
}

.btn-warning {
  background-color: #faad14;
  color: #fff;
}

.btn-danger {
  background-color: #f5222d;
  color: #fff;
}

.btn-small {
  font-size: 12px;
  padding: 4px 8px;
}

.btn-medium {
  font-size: 14px;
  padding: 8px 16px;
}

.btn-large {
  font-size: 16px;
  padding: 12px 24px;
}

.iconfont {
  font-family: 'iconfont';
  font-size: 16px;
  margin-right: 4px;
}
</style>

这个组件的实现与Ant Design Vue的Button组件很相似。它支持传入类型、尺寸、图标、loading状态和禁用状态。它还使用插槽来允许在按钮内部插入任何内容。

希望这个例子能帮助你更好地理解如何实现Vue组件库。