vue公共按钮实现

Vue 公共按钮的实现方法

在 Vue 中实现公共按钮组件，可以通过封装一个可复用的按钮组件来实现。以下是几种常见的实现方式：

封装基础按钮组件

创建一个基础的按钮组件，包含常见的属性和事件：

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

<style scoped>
.base-button {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #dcdfe6;
}

.primary {
  background-color: #409eff;
  color: white;
}

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

.warning {
  background-color: #e6a23c;
  color: white;
}
</style>

使用渲染函数实现更灵活的按钮

对于需要更复杂逻辑的按钮，可以使用渲染函数：

export default {
  functional: true,
  props: {
    type: {
      type: String,
      default: 'default'
    },
    icon: String
  },
  render(h, { props, slots, listeners }) {
    return h(
      'button',
      {
        class: ['func-button', props.type],
        on: listeners
      },
      [
        props.icon && h('i', { class: ['icon', props.icon] }),
        slots().default
      ]
    )
  }
}

全局注册按钮组件

在 main.js 中全局注册按钮组件：

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

Vue.component('BaseButton', BaseButton)

使用混入(Mixin)添加通用按钮逻辑

创建按钮混入文件 buttonMixin.js：

export default {
  methods: {
    handleButtonClick() {
      if (this.disabled) return
      this.$emit('click')
    }
  },
  computed: {
    buttonClasses() {
      return [
        'button',
        this.type,
        {
          'is-disabled': this.disabled
        }
      ]
    }
  }
}

按钮组件的使用示例

在页面中使用公共按钮组件：

<template>
  <div>
    <BaseButton @click="handleClick">默认按钮</BaseButton>
    <BaseButton type="primary" @click="handleClick">主要按钮</BaseButton>
    <BaseButton type="danger" :disabled="true">禁用按钮</BaseButton>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击')
    }
  }
}
</script>

这些方法提供了不同层次的封装方式，可以根据项目需求选择合适的实现方案。基础按钮组件适合大多数简单场景，渲染函数方式适合需要高度定制的情况，而混入则适合需要在多个组件间共享按钮逻辑的场景。