我没那么讨厌写代码了！AI编程：左侧菜单栏宽度可随鼠标拖动而放大缩小。

前言

大家好，我是0籽。
对于我这个菜鸡程序媛来说，这功能我得研究一天才能完成。查文档，看别人的屎山代码...

一开始，产品人员给我提这个优化需求时，我是拒绝的。
我：“这个功能比较复杂，一时半会写不出来。”
产品人员：“你研究哈嘛”

然后...然后...1个小时就搞完了，验收完毕。
不得不感慨，我没那么讨厌写代码啦！因为有了??ChatGPT??。

01. 最终效果呈现

1.png

2.png

02. 实现步骤

• 准备AI提示词
• 发给ChatGPT
• 把ChatGPT回复的代码，粘贴到编辑器运行看效果
• 如果有没实现的细节，再补充提示词修正代码

03. AI提示词

帮我写段 React class 组件和 CSS 样式代码。要求：左边菜单栏有3个菜单；当鼠标经过菜单栏右侧线左右1厘米时，右侧线出现可拖动样式；并且按住鼠标拖动时，菜单栏宽度可拖动放大缩小。

04. ChatGPT回应

3.png

4.png

05. 源代码

import React from 'react';
import './ResizableMenu.css';

class ResizableMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isHovered: false,
      isDragging: false,
      startX: 0,
      startWidth: 0,
    };
  }

  handleMouseEnter = () => {
    this.setState({ isHovered: true });
  };

  handleMouseLeave = () => {
    this.setState({ isHovered: false });
  };

  handleMouseDown = (e) => {
    this.setState({
      isDragging: true,
      startX: e.clientX,
      startWidth: this.refs.menu.offsetWidth,
    });

    document.addEventListener('mousemove', this.handleMouseMove);
    document.addEventListener('mouseup', this.handleMouseUp);
  };

  handleMouseMove = (e) => {
    if (this.state.isDragging) {
      const newWidth = this.state.startWidth + e.clientX - this.state.startX;
      this.refs.menu.style.width = `${newWidth}px`;
    }
  };

  handleMouseUp = () => {
    this.setState({ isDragging: false });
    document.removeEventListener('mousemove', this.handleMouseMove);
    document.removeEventListener('mouseup', this.handleMouseUp);
  };

  render() {
    return (
      <div className="resizable-menu">
        <div
          className="menu"
          ref="menu"
          onMouseEnter={this.handleMouseEnter}
          onMouseLeave={this.handleMouseLeave}
        >
          <div className="menu-item">菜单项1</div>
          <div className="menu-item">菜单项2</div>
          <div className="menu-item">菜单项3</div>
        </div>
        <div
          className={`separator ${this.state.isHovered 'draggable' : ''}`}
          onMouseDown={this.handleMouseDown}
        ></div>
      </div>
    );
  }
}

export default ResizableMenu;

.resizable-menu {
  display: flex;
  height: 100%;
}

.menu {
  flex: 0 0 auto;
  width: 200px;
  background-color: #f0f0f0;
  padding: 10px;
  transition: width 0.3s;
  overflow: hidden;
}

.menu-item {
  padding: 5px 0;
  cursor: pointer;
}

.separator {
  flex: 0 0 2px;
  background-color: #ccc;
  cursor: ew-resize;
}

.separator.draggable {
  background-color: #333;
}

最后

仅供参考，希望能帮到你们。