React共享单车后台管理系统开发——UI菜单button modal的使用（Andt UI组件）

曾经终败给现在 2022-04-22 11:32 219阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70][]

[https://blog.csdn.net/qq\_34829447/article/details/81977779][https_blog.csdn.net_qq_34829447_article_details_81977779]

一.按钮组件  
1.Card组件  
引入Card:import \{Card\} from 'antd';

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

如:<Card title="基础组件"></Card>效果如下

一.按钮组件  
1.Card组件  
引入Card:import \{Card\} from 'antd';

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

如:<Card title="基础组件"></Card>效果如下

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{
      button{
          margin-right: 10px;
      }
    }
    --------------------- 
    作者：汪喆_Jack 
    来源：CSDN 
    原文：https://blog.csdn.net/qq_34829447/article/details/81977779 
    版权声明：本文为博主原创文章，转载请附上博文链接！

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>欢迎使用喆哥版弹框</p>  
              </Modal>  
          </div>  
      );  
  \}  
\}  
export default Models;  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
效果图

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,\{Component\} from 'react';  
import \{Card,Button,Modal\} from 'antd';  
import './ui.less';  
class Models extends Component\{  
  state=\{  
      showModal1:false,  
      showModal2:false,  
      showModal3:false,  
      showModal4:false  
  \}  
  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>  
              <Card title="基础模态框" className="card-wrap">  
                  <Button type="primary" onClick=\{()=>this.handleConfirm('showModal1')\}>Confirm</Button>  
                  <Button type="primary" onClick=\{()=>this.handleConfirm('showModal2')\}>Info</Button>  
                  <Button type="primary" onClick=\{()=>this.handleConfirm('showModal3')\}>Success</Button>  
                  <Button type="primary" onClick=\{()=>this.handleConfirm('showModal4')\}>Warning</Button>  
              </Card>  
              <Modal  
                  title="React"  
                  visible=\{this.state.showModal1\}  
                  onCancel=\{()=>\{  
                      this.setState(\{  
                          showModal1:false  
                      \})  
                  \}\}  
                  >  
                  <p>欢迎使用喆哥版弹框</p>  
              </Modal>  
              <Modal  
                  title="React"  
                  visible=\{this.state.showModal2\}  
                  okText="好的"  
                  cancelText="算了"  
                  onCancel=\{()=>\{  
                      this.setState(\{  
                          showModal2:false  
                      \})  
                  \}\}  
                  >  
                  <p>欢迎使用喆哥版弹框</p>  
              </Modal>  
              <Modal  
                  title="React"  
                  visible=\{this.state.showModal3\}  
                  style=\{ \{top:20\}\}  
                  onCancel=\{()=>\{  
                      this.setState(\{  
                          showModal3:false  
                      \})  
                  \}\}  
                  >  
                  <p>欢迎使用喆哥版弹框</p>  
              </Modal>  
              <Modal  
                  title="React"  
                  visible=\{this.state.showModal4\}  
                  wrapClassName="vertical-center-modal"  
                  onCancel=\{()=>\{  
                      this.setState(\{  
                          showModal4:false  
                      \})  
                  \}\}  
                  >  
                  <p>欢迎使用喆哥版弹框</p>  
              </Modal>  
          </div>  
      );  
  \}  
\}  
export default Models;  
\---------------------   
作者：汪喆\_Jack   
来源：CSDN   
原文：https://blog.csdn.net/qq\_34829447/article/details/81977779   
版权声明：本文为博主原创文章，转载请附上博文链接！

//\[/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\{  
  button\{  
      margin-right: 10px;  
  \}  
\}  
  
效果图