react 项目实战之悬浮菜单

菜单需求：
1.当页面滚动到底部时，点击按钮，回答顶部
2.当悬停在图标上，显示留言表单
3.当悬停在图标上，显示二维码

QQ20190416-150837.png

1.form表单组件等编写

 import styles from './index.css';
import React from 'react';
import { Form, Input, Button } from 'antd';
import router from 'umi/router';

const { TextArea } = Input;
@Form.create()
class Forms extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        router.push({
          pathname: '/',
          query: { ...values },
        });
        this.props.form.resetFields();
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} style={{ padding: '15px 15px 0 15px' }}>
        <Form.Item>
          {getFieldDecorator('name', {
            rules: [{ required: true, message: '请输入您的姓名!' }],
          })(<Input placeholder="请输入您的姓名" />)}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('phone', {
            rules: [
              {
                required: true,
                pattern: new RegExp(/^[1-9]\d*$/, 'g'),
                message: '请输入正确格式的电话号码!',
              },
            ],
          })(<Input placeholder="请输入您的电话号码" maxLength={11} />)}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('message', {
            rules: [{ required: true, message: '请输入您的留言!' }],
          })(<TextArea placeholder="请输入您的留言" className={styles.textarea} />)}
        </Form.Item>
        <Form.Item>
          <p className={styles.explain}>* 我们将对您的信息进行保密，请放心填写</p>
          <Button type="primary" htmlType="submit" className={styles.button}>
            发送
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

export default Forms;

2.form表单样式

 .textarea {
    padding: 6px;
    line-height: 18px;
    font-size: 14px;
    height: 60px !important;
    width: 100%;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
}

.explain {
    color: #999999;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 3px;
}

.button {
    margin-left: 40%;
}

3.菜单页面

import styles from './index.css';
import React from 'react';
import Forms from './Froms';
class HoverButton extends React.Component {
  constructor() {
    super();
    this.state = {
      list_data: [
        {
          img: require('@/assets/hover_button/gotop1.png'),
        },
        {
          img: require('@/assets/hover_button/compile1.png'),
        },
        {
          img: require('@/assets/hover_button/QR_code1.png'),
        },
      ],
      QR_code_WeChat: { display: 'none' },
      formStyle: { display: 'none' },
    };
  }
  render() {
    const list_datas = this.state.list_data;
    return (
      <div className={styles.Hover_button}>
        {list_datas.map((item, key) => (
          <div
            className={styles.Hover_button_list}
            onClick={e => {
              this.clickEven(key);
            }}
            onMouseOver={e => {
              this.MouseOverEvent(key);
            }}
            onMouseLeave={this.MouseLeaveEven.bind(this)}
            key={key}
          >
            <img src={item.img} alt="" draggable="false" />
          </div>
        ))}
        {/* 二维码 */}
        <img
          src={require('@/assets/hover_button/QR_code_WeChat.png')}
          alt=""
          className={styles.QR_code_WeChat}
          style={this.state.QR_code_WeChat}
        />
        {/* 留言框 */}
        <div className={styles.leaveWords} style={this.state.formStyle}>
          <div className={styles.leaveWordsHead}>
            <p>请留言</p>
            <img
              src={require('@/assets/hover_button/close.png')}
              alt="close"
              onClick={this.closeForm.bind(this)}
              draggable="false"
            />
          </div>
          <Forms />
        </div>
      </div>
    );
  }
  // 点击按钮  回到顶部
  clickEven(key) {
    if (key === 0) {
      window.scrollTo({
        left: 0,
        top: 0,
        behavior: 'smooth',
      });
    } else if (key === 1) {
    } else if (key === 2) {
    }
  }
  //鼠标移入按钮
  MouseOverEvent(key) {
    if (key === 0) {
      this.setState({
        list_data: [
          {
            img: require('@/assets/hover_button/gotop2.png'),
          },
          {
            img: require('@/assets/hover_button/compile1.png'),
          },
          {
            img: require('@/assets/hover_button/QR_code1.png'),
          },
        ],
        formStyle: { display: 'none' },
        QR_code_WeChat: { display: 'none' },
      });
    } else if (key === 1) {
      this.setState({
        list_data: [
          {
            img: require('@/assets/hover_button/gotop1.png'),
          },
          {
            img: require('@/assets/hover_button/compile2.png'),
          },
          {
            img: require('@/assets/hover_button/QR_code1.png'),
          },
        ],
        formStyle: { display: 'block' },
        QR_code_WeChat: { display: 'none' },
      });
    } else if (key === 2) {
      this.setState({
        list_data: [
          {
            img: require('@/assets/hover_button/gotop1.png'),
          },
          {
            img: require('@/assets/hover_button/compile1.png'),
          },
          {
            img: require('@/assets/hover_button/QR_code2.png'),
          },
        ],
        formStyle: { display: 'none' },
        QR_code_WeChat: { display: 'block' },
      });
    }
  }
  // 鼠标移出按钮
  MouseLeaveEven() {
    this.setState({
      list_data: [
        {
          img: require('@/assets/hover_button/gotop1.png'),
        },
        {
          img: require('@/assets/hover_button/compile1.png'),
        },
        {
          img: require('@/assets/hover_button/QR_code1.png'),
        },
      ],
      QR_code_WeChat: { display: 'none' },
    });
  }
  //关闭表单
  closeForm() {
    this.setState({
      formStyle: { display: 'none' },
    });
  }
}

export default HoverButton;

4.菜单样式

.Hover_button {
    width: 48px;
    position: fixed;
    z-index: 99999;
    bottom: 60px;
    right: 24px;
}

.Hover_button_list {
    margin-bottom: 2px;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    overflow: hidden;
}

.Hover_button_list img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    cursor: pointer;
}

.QR_code_WeChat {
    width: 136px;
    height: auto;
    display: block;
    position: absolute;
    bottom: -10px;
    left: -140px;
}

.leaveWords {
    width: 300px;
    position: absolute;
    bottom: 1px;
    left: -315px;
    background-color: #f5f5f5;
    box-shadow: 5px 5px 5px rgba(142, 142, 142, 0.3);
}

.leaveWordsHead {
    width: 100%;
    background-color: #1e94d4;
    padding: 8px 15px;
    zoom: 1;
}

.leaveWordsHead::after {
    content: '';
    display: block;
    clear: both;
}

.leaveWordsHead p {
    color: #ffffff;
    font-size: 18px;
    width: 60%;
    float: left;
}

.leaveWordsHead img {
    display: block;
    float: right;
    margin-top: 3px;
    cursor: pointer;
}