vue公共按钮实现

公共按钮组件的实现

在Vue中实现公共按钮组件可以通过以下方式完成。公共按钮组件有助于统一UI风格、减少重复代码，并便于维护。

创建基础按钮组件

新建一个Button.vue文件，定义基础按钮的模板和样式：

<template>
  <button 
    :class="['base-button', type, size, { '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: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
.base-button {
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 8px 16px;
  transition: all 0.3s;
}

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

.danger {
  background-color: #ff4d4f;
  color: white;
}

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

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

.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>
    <BaseButton type="primary" @click="handleSubmit">提交</BaseButton>
    <BaseButton type="danger" size="small" :disabled="isDisabled">删除</BaseButton>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDisabled: false
    }
  },
  methods: {
    handleSubmit() {
      console.log('按钮被点击')
    }
  }
}
</script>

增强按钮组件功能

可以通过以下方式增强公共按钮组件的功能：

添加加载状态

在Button.vue中添加加载状态支持：

<template>
  <button 
    :class="['base-button', type, size, { 'disabled': disabled || loading }]"
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <span v-if="loading" class="loading-icon">⏳</span>
    <slot v-else></slot>
  </button>
</template>

<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    }
    // 其他props...
  }
  // 其他代码...
}
</script>

<style scoped>
.loading-icon {
  display: inline-block;
  margin-right: 8px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>

添加图标支持

扩展组件以支持图标显示：

<template>
  <button 
    :class="['base-button', type, size, { 'disabled': disabled || loading }]"
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <i v-if="icon" :class="['icon', icon]"></i>
    <span v-if="loading" class="loading-icon">⏳</span>
    <slot v-else></slot>
  </button>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      default: ''
    }
    // 其他props...
  }
  // 其他代码...
}
</script>

按钮组件的主题定制

可以通过CSS变量或SCSS变量实现主题定制：

使用CSS变量

<style scoped>
:root {
  --primary-color: #1890ff;
  --danger-color: #ff4d4f;
}

.primary {
  background-color: var(--primary-color);
}

.danger {
  background-color: var(--danger-color);
}
</style>

使用SCSS变量

<style lang="scss" scoped>
$primary-color: #1890ff;
$danger-color: #ff4d4f;

.primary {
  background-color: $primary-color;
}

.danger {
  background-color: $danger-color;
}
</style>

按钮组件的测试

为按钮组件添加单元测试确保功能正常：

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

describe('BaseButton', () => {
  it('触发点击事件', () => {
    const wrapper = shallowMount(BaseButton)
    wrapper.trigger('click')
    expect(wrapper.emitted().click).toBeTruthy()
  })

  it('禁用状态下不触发点击事件', () => {
    const wrapper = shallowMount(BaseButton, {
      propsData: {
        disabled: true
      }
    })
    wrapper.trigger('click')
    expect(wrapper.emitted().click).toBeFalsy()
  })

  it('显示加载状态', () => {
    const wrapper = shallowMount(BaseButton, {
      propsData: {
        loading: true
      }
    })
    expect(wrapper.find('.loading-icon').exists()).toBe(true)
  })
})

通过以上方法可以实现一个功能完善、可复用的Vue公共按钮组件，满足不同场景下的需求。