当前位置: 首页>后端>正文

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

前言

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

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

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

01. 最终效果呈现

我没那么讨厌写代码了!AI编程:左侧菜单栏宽度可随鼠标拖动而放大缩小。,第1张
1.png

我没那么讨厌写代码了!AI编程:左侧菜单栏宽度可随鼠标拖动而放大缩小。,第2张
2.png

02. 实现步骤

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

03. AI提示词

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

04. ChatGPT回应

我没那么讨厌写代码了!AI编程:左侧菜单栏宽度可随鼠标拖动而放大缩小。,第3张
3.png

我没那么讨厌写代码了!AI编程:左侧菜单栏宽度可随鼠标拖动而放大缩小。,第4张
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;
}

最后

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


https://www.xamrdz.com/backend/3tu1939960.html

相关文章: