js实现一个按钮组件

实现一个基础按钮组件

使用原生JavaScript创建一个可复用的按钮组件，包含基础样式和交互功能。

class Button {
  constructor(text, onClick) {
    this.text = text;
    this.onClick = onClick;
  }

  render() {
    const button = document.createElement('button');
    button.textContent = this.text;
    button.addEventListener('click', this.onClick);

    // 基础样式
    button.style.padding = '8px 16px';
    button.style.borderRadius = '4px';
    button.style.backgroundColor = '#007bff';
    button.style.color = 'white';
    button.style.border = 'none';
    button.style.cursor = 'pointer';

    // 悬停效果
    button.addEventListener('mouseover', () => {
      button.style.backgroundColor = '#0069d9';
    });
    button.addEventListener('mouseout', () => {
      button.style.backgroundColor = '#007bff';
    });

    return button;
  }
}

使用示例

// 创建按钮实例
const myButton = new Button('点击我', () => {
  alert('按钮被点击了!');
});

// 添加到DOM
document.body.appendChild(myButton.render());

添加自定义样式选项

扩展按钮组件以支持自定义样式参数。

class Button {
  constructor(text, onClick, options = {}) {
    this.text = text;
    this.onClick = onClick;
    this.options = {
      backgroundColor: '#007bff',
      textColor: 'white',
      hoverColor: '#0069d9',
      ...options
    };
  }

  render() {
    const button = document.createElement('button');
    button.textContent = this.text;
    button.addEventListener('click', this.onClick);

    button.style.padding = '8px 16px';
    button.style.borderRadius = '4px';
    button.style.backgroundColor = this.options.backgroundColor;
    button.style.color = this.options.textColor;
    button.style.border = 'none';
    button.style.cursor = 'pointer';

    button.addEventListener('mouseover', () => {
      button.style.backgroundColor = this.options.hoverColor;
    });
    button.addEventListener('mouseout', () => {
      button.style.backgroundColor = this.options.backgroundColor;
    });

    return button;
  }
}

自定义按钮使用示例

const customButton = new Button('自定义按钮', () => {
  console.log('自定义按钮点击');
}, {
  backgroundColor: '#28a745',
  textColor: 'white',
  hoverColor: '#218838'
});

document.body.appendChild(customButton.render());

添加禁用状态功能

为按钮组件添加禁用状态控制。

class Button {
  constructor(text, onClick, options = {}) {
    this.text = text;
    this.onClick = onClick;
    this.options = {
      backgroundColor: '#007bff',
      textColor: 'white',
      hoverColor: '#0069d9',
      disabled: false,
      ...options
    };
    this.disabled = this.options.disabled;
  }

  render() {
    const button = document.createElement('button');
    button.textContent = this.text;

    if (!this.disabled) {
      button.addEventListener('click', this.onClick);
    }

    button.style.padding = '8px 16px';
    button.style.borderRadius = '4px';
    button.style.backgroundColor = this.disabled ? '#cccccc' : this.options.backgroundColor;
    button.style.color = this.options.textColor;
    button.style.border = 'none';
    button.style.cursor = this.disabled ? 'not-allowed' : 'pointer';

    if (!this.disabled) {
      button.addEventListener('mouseover', () => {
        button.style.backgroundColor = this.options.hoverColor;
      });
      button.addEventListener('mouseout', () => {
        button.style.backgroundColor = this.options.backgroundColor;
      });
    }

    return button;
  }

  disable() {
    this.disabled = true;
  }

  enable() {
    this.disabled = false;
  }
}

禁用状态使用示例

const stateButton = new Button('状态按钮', () => {
  alert('按钮可用状态');
});

document.body.appendChild(stateButton.render());

// 5秒后禁用按钮
setTimeout(() => {
  stateButton.disable();
}, 5000);