当前位置：首页 > VUE

vue公共按钮实现

2026-01-16 07:06:29VUE

Vue 公共按钮组件实现方法

封装基础按钮组件

创建 Button.vue 文件，定义基础按钮模板和样式：

<template>
  <button 
    :class="['base-button', type, size, { 'is-disabled': disabled }]"
    :disabled="disabled"
    @click="handleClick"
  >
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'BaseButton',
  props: {
    type: {
      type: String,
      default: 'default',
      validator: value => ['default', 'primary', 'danger', 'warning'].includes(value)
    },
    size: {
      type: String,
      default: 'medium',
      validator: value => ['small', 'medium', 'large'].includes(value)
    },
    disabled: Boolean
  },
  methods: {
    handleClick(e) {
      this.$emit('click', e)
    }
  }
}
</script>

<style scoped>
.base-button {
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}
/* 不同类型样式 */
.primary {
  background: #1890ff;
  color: white;
}
/* 尺寸样式 */
.small { padding: 5px 10px; }
.medium { padding: 8px 15px; }
.large { padding: 12px 20px; }
.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>

全局注册组件

在 main.js 中全局注册：

import Vue from 'vue'
import BaseButton from '@/components/Button.vue'

Vue.component('BaseButton', BaseButton)

组件使用方式

在任意组件中直接使用：

<template>
  <div>
    <base-button type="primary" @click="handleSubmit">提交</base-button>
    <base-button type="danger" size="small" :disabled="isDisabled">删除</base-button>
  </div>
</template>

扩展功能实现

添加图标支持：

<template>
  <button class="base-button">
    <i v-if="icon" :class="['icon', icon]"></i>
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    icon: String
  }
}
</script>

主题定制方案

通过 SCSS 变量实现主题切换：

// variables.scss
$primary-color: #1890ff;
$danger-color: #ff4d4f;

// button.scss
.primary {
  background: $primary-color;
}
.danger {
  background: $danger-color;
}

单元测试示例

使用 Jest 测试组件行为：

import { shallowMount } from '@vue/test-utils'
import BaseButton from '@/components/Button.vue'

describe('BaseButton', () => {
  it('emits click event', () => {
    const wrapper = shallowMount(BaseButton)
    wrapper.trigger('click')
    expect(wrapper.emitted('click')).toBeTruthy()
  })
})

按需加载配置

配合 babel-plugin-component 实现按需引入：

vue公共按钮实现

// babel.config.js
module.exports = {
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}