（记录笔记4）——4.1 按钮+Modal组件

4.1 按钮+Modal组件

一.按钮组件

1.Card组件

引入Card:import {Spin} from ‘antd’;

title属性用于标注卡片上方标题

如:效果如下

2.Button组件

• 引入Button组件:import {Button} from 'antd';

• type属性值

  • primary表示主按钮
  • 不写type表示默认样式按钮
  • dashed表示虚线按钮
  • danger表示危险按钮

• disable属性值表示禁用按钮

• icon属性值表示按钮图标样式

  • plus表示加号
  • edit表示编辑
  • delete表示删除
  • search表示搜索
  • download表示下载

• shape属性表示按钮形状

  • circle表示圆形

• loading属性为{true}表示加载中（此时按钮不能点击）

• 按钮组为Button.Group组件，用于表示包含的Button组件是一个组

• size属性表示组件大小

  • small小按钮组件
  • default默认大小按钮组件
  • large大按钮组件

3.Radio组件

• 引入Radio组件:import {Radio} from 'antd';
• Radio组件外部需要用Radio.Group组件包裹，并通过外部组件对象可以获得内部Radio组件的value值(通过e.target.value)

4.应用实例

button.js及对应添加的样式如下所示

//[/src/pages/ui/button.js]
import React,{Component} from 'react';
import {Card,Button,Radio} from 'antd';
import './ui.less';
class Buttons extends Component{
  constructor(props){
      super(props);
      this.state={
          loading:true,
          size:'default'
      }
  }
  render(){
      return(
          <div>
              <Card title="基础按钮" className="card-wrap">
                  {/*主按钮*/}
                  <Button type="primary">Imooc</Button>
                  <Button>Imooc</Button>
                  {/* 虚线按钮 */}
                  <Button type="dashed">Imooc</Button>
                  {/* 危险按钮 */}
                  <Button type="danger">Imooc</Button>
                  {/* 禁用按钮 */}
                  <Button disabled>Imooc</Button>
              </Card>
              <Card title="图形按钮" className="card-wrap">
                  {/*通过icon设定图标,shape设置形状*/}
                  <Button icon="plus">创建</Button>
                  <Button icon="edit">编辑</Button>
                  <Button icon="delete">删除</Button>
                  <Button icon="search" shape="circle"></Button>
                  <Button type="primary" icon="search">搜索</Button>
                  <Button type="primary" icon="download">下载</Button>
              </Card>
              <Card title="Loading按钮" className="card-wrap">
                  {/*通过loading属性为{true}表示加载中图标(此时按钮不能点)*/}
                  <Button type="primary" loading={this.state.loading}>确定</Button>
                  <Button type="primary" shape="circle" loading={this.state.loading} ></Button>
                  <Button loading={this.state.loading} >点击加载</Button>
                  <Button shape="circle" loading={this.state.loading} ></Button>
                  <Button type="primary" onClick={this.handleCloseLoading}>关闭</Button>
              </Card>
              <Card title="按钮组">
                  <Button.Group>
                      <Button type="primary" icon="left">返回</Button>
                      <Button type="primary" icon="right">前进</Button>
                  </Button.Group>
              </Card>
              <Card title="按钮尺寸" className="card-wrap">
                  <Radio.Group value={this.state.size} onChange={this.handleChange}>
                      <Radio value="small">小</Radio>
                      <Radio value="default">中</Radio>
                      <Radio value="large">大</Radio>
                  </Radio.Group>
                  <Button type="primary" size={this.state.size}>Imooc</Button>
                  <Button size={this.state.size}>Imooc</Button>
                  <Button type="dashed" size={this.state.size}>Imooc</Button>
                  <Button type="danger" size={this.state.size}>imooc</Button>
              </Card>
          </div>
      )
  }
  handleCloseLoading=()=>{
      this.setState({
          loading:false
      });
  }
  handleChange=(e)=>{
      this.setState({
          size:e.target.value
      });
  }
}
export default Buttons;
 
//[/src/pages/ui/ui.less]
.card-wrap {
  margin-bottom: 10px;
    button {
    margin-right: 10px;
  }
}
 
/* modals */
/* use css to set position of modal */
.vertical-center-modal {
  text-align: center;
  white-space: nowrap;
}
 
.vertical-center-modal:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
}
 
.vertical-center-modal .ant-modal {
  display: inline-block;
  vertical-align: middle;
  top: 0;
  text-align: left;
}
 

5.补充知识点

当Route页面内部信息超过当前页面大小时，会出现滚动条，左侧导航栏会跟着一起滚动，导航栏下方为空白。

解决方案：

将common.less中的main的定义添加overflow:auto，表示当渲染页面高度超过当前屏幕时，自动滚动

二.弹框组件

1.Modal基本组件

• 引用Modal:import {Modal} from ‘antd’;

• Model组件属性

• • title属性作为标题显示
  • visible属性参数为{true|false}，为true则显示，false则不显示
  • onCancel属性值为一个函数，执行当点击模态框的×或cancel选项时执行的方法

• Model内部填写的内容将作为模态框的正文内容

知识点：

• 组件的onClick值为this.handleName（即函数名）时，表示一开始就会自动调用，无法传参；当需要传参时，需要将onClick中的内容变为箭头函数，返回代参的调用方法从而实现点击时执行函数并传参调用方法

• 传递的参数如果想作为对象的键时，需要用[]进行包裹，如果没包裹直接放置键的位置则视为变量而报错。

实例代码

//[src/pages/ui/modal.js]
import React,{Component} from 'react';
import {Card,Button,Modal} from 'antd';
import './ui.less';
 
class Models extends Component{
  state={
      showModal1:false,
      showModal2:true,
      showModal3:true,
      showModal4:true
  }
  handleOpen=(type)=>{
      this.setState({
          [type]:true
      })
  }
  render(){
      return(
          <div>
              <Card title="基础模态框" className="card-wrap">
                  <Button type="primary" onClick={()=>this.handleOpen('showModal1')}>Open</Button>
                  <Button type="primary" onClick={()=>this.handleOpen('showModal2')}>自定义页脚</Button>
                  <Button type="primary" onClick={()=>this.handleOpen('showModal3')}>顶部20px弹框</Button>
                  <Button type="primary" onClick={()=>this.handleOpen('showModal4')}>水平垂直居中</Button>
              </Card>
              <Modal
                  title="React"
                  visible={this.state.showModal1}
                  onCancel={()=>{
                      this.setState({
                          showModal1:false
                      })
                  }}
                  >
                  <p>欢迎使用imooc版弹框</p>
              </Modal>
          </div>
      );
  }
}
export default Models;

2.Model 高级用法

自定义页脚、顶部20px弹框、水平垂直居中

• Model自定义页脚实现方式

• • Model组件的visible属性{true}或{false}实现是否显示

• Model组件的okText属性设置OK选项的显示内容

• Model组件的cancelText属性设置Cancel选项显示内容

• Model顶部20px弹框实现方式

• • 利用style属性值为{{top:20}}设定距顶部20px

• Model水平居中实现方式

• • 利用Model组件的wrapClassName设定样式名称

实例代码

import React from "react";
import { Card, Button, Modal } from "antd";
import "./ui.less";
export default class Modals extends React.Component {
  state = {
    //设置默认值
    showModal1: false,
    showModal2: false,
    showModal3: false,
    showModal4: false
  };
  handleOpen = type => {
    //带 [] 会将type 当作变量,动态设置属性
    this.setState({
      [type]: true
    });
  };
  handleConfirm=(type)=>{
    // Modal.confirm()
    // Modal['confirm']
    // var a ={
    //     confirm:function(){}
    // }
    // a.confirm()
    // a['confirm']
 
    //通过type动态调用函数
    // -  Modal.confirm({
    // +  Modal[type]({
    Modal[type]({
      title:'确认',
      content:'你确定学会React了吗',
      onOk(){
        console.log('Ok');
      },
      onCancel(){
        console.log('Cancel');
      }
    })
  }
  handleOk = () => {
    this.setState({
      showModal1: false
    });
  };
  render() {
    return (
      <div>
        {/* this is modals page. */}
        <Card title="基础模态框" className="card-wrap">
          <Button type="primary" onClick={() => this.handleOpen("showModal1")}>
            Open
          </Button>
          <Button type="primary" onClick={() => this.handleOpen("showModal2")}>
            自定义页脚
          </Button>
          <Button type="primary" onClick={() => this.handleOpen("showModal3")}>
            顶部20px弹框
          </Button>
          <Button type="primary" onClick={() => this.handleOpen("showModal4")}>
            水平垂直居中
          </Button>
        </Card>
        <Card title="基础模态框" className="card-wrap">
          <Button type="primary" onClick={() => this.handleConfirm("confirm")}>
            Confirm
          </Button>
          <Button type="primary" onClick={() => this.handleConfirm("info")}>
            Info
          </Button>
          <Button type="primary" onClick={() => this.handleConfirm("success")}>
            Success
          </Button>
          <Button type="primary" onClick={() => this.handleConfirm("error")}>
            Error
          </Button>
          <Button type="primary" onClick={() => this.handleConfirm("warning")}>
            Warning
          </Button>
        </Card>
        <Modal
          title="React"
          visible={this.state.showModal1}
          onOk={() => {
            this.setState({
              showModal1: false
            });
          }}
          onCancel={() => {
            this.setState({
              showModal1: false
            });
          }}
        >
          <p>欢迎学习慕课新推出的React高级课程</p>
        </Modal>
        <Modal
          title="React"
          visible={this.state.showModal2}
          okText="好的"
          cancelText="算了"
          onOk={() => {
            this.setState({
              showModal2: false
            });
          }}
          onCancel={() => {
            this.setState({
              showModal2: false
            });
          }}
        >
          <p>欢迎学习慕课新推出的React高级课程</p>
        </Modal>
         
        <Modal
          title="React"
          style={{ top: 20 }}
          visible={this.state.showModal3}
          onOk={() => {
            this.setState({
              showModal3: false
            });
          }}
          onCancel={() => {
            this.setState({
              showModal3: false
            });
          }}
        >
          <p>欢迎学习慕课新推出的React高级课程</p>
        </Modal>
        <Modal
          title="React"
          wrapClassName="vertical-center-modal"
          visible={this.state.showModal4}
          onOk={() => {
            this.setState({
              showModal4: false
            });
          }}
          onCancel={() => {
            this.setState({
              showModal4: false
            });
          }}
        >
          <p>欢迎学习慕课新推出的React高级课程</p>
        </Modal>
      </div>
    );
  }
}