前言

我是歌謠我有個兄弟巔峰的時候排名c站總榜19 叫前端小歌謠曾經我花了三年的時間創作了他現在我要用五年的時間超越他今天又是接近兄弟的一天人生難免坎坷大不了從頭再來歌謠的意志是永恒的放棄很容易但是堅持一定很酷

導語

大家好我是歌謠目前開源專案的一個提交已經進入了一個新的階段如今已經加入了專案中的一個按鈕組件封裝此功能模塊建議接觸過ant design+react的同學閱讀無基礎者會引起不適

父子組件呼叫

首先我們看一下父子組件的一個呼叫

父組件

第一步

import  ButtonGroup from './Common/ButtonGroup/index.js';

第二步

<ButtonGroup buttonList={aloudList} maxShowCount={3}></ButtonGroup>

子組件

class ButtonGroup extends Component {
  render() {
    const { buttonList = [], maxShowCount = 4, style = {} } = this.props;
    //1.列印出傳入的buttonList的值
    console.log(buttonList,"我是傳入的初始值buttonList")
    let _buttonList = buttonList.filter((item) => !item.hide);
    //2列印出過濾的hide不是true的值
    console.log(_buttonList,"我是過濾后不是true的值_buttonList")
    console.log(_buttonList.slice(maxShowCount),"我是截取后的值_buttonList")
    const menu = (
      <Menu>
        {_buttonList.slice(maxShowCount).map((item, index) =>
        
          item.isDelete ? (
            <Menu.Item key={index}>
              <Popconfirm title={item.btnTxt || '確認洗掉?'} 
onConfirm={item.onClick}>
                <Button
                  loading={item.loading}
                  icon={item.icon}
                  type={item.type || 'link'}
                  className={styles.menuBtn}
                >
                  {item.title}
                </Button>
              </Popconfirm>
            </Menu.Item>
          ) : (
            <Menu.Item key={index}>
              <Button
                loading={item.loading}
                icon={item.icon}
                type={item.type || 'link'}
                href={item.href}
                onClick={item.onClick}
                title={item.altTitle}
                className={styles.menuBtn}
              >
                {item.title}
              </Button>
            </Menu.Item>
          )
        )}
      </Menu>
    );
    return (
      <div
        style={{
          display: 'flex',
          justifyContent: 'flex-end',
          alignItems: 'center',
          marginRight: 24,
          marginBottom: 24,
          ...style,
        }}
      >
        {_buttonList.map((item, index) => {
          if (index < maxShowCount) {
            if (item.isPopconfirm)
              return (
                <Popconfirm title={item.popTitle} key={index} 
onConfirm={item.onClick}>
                  <Button
                    style={{ marginLeft: 8 }}
                    loading={item.loading}
                    icon={item.icon}
                    type={item.type}
                  >
                    {item.title}
                  </Button>
                </Popconfirm>
              );
            return item.isDelete ? (
              <Popconfirm title={item.btnTxt || '確認洗掉?'} key={index} 
onConfirm={item.onClick}>

                <Button
                  style={{ marginLeft: 8 }}
                  loading={item.loading}
                  icon={item.icon}
                  type={item.type}
                >
                  {item.title}
                </Button>
              </Popconfirm>
            ) : (
              <Button
                style={{ marginLeft: 8 }}
                key={index}
                loading={item.loading}
                icon={item.icon}
                type={item.type}
                href={item.href}
                onClick={item.onClick}
                title={item.altTitle}
              >
                {item.title}
              </Button>
            );
          }
          if (index === maxShowCount) {
            return (
              <Dropdown key={index} overlay={menu} placement="bottomCenter">
                <Button style={{ marginLeft: 8 }}>更多操作</Button>
              </Dropdown>
            );
          }
          return '';
        })}
      </div>
    );
  }
}

export default ButtonGroup;

資料演示

需要定義一個資料這邊父子組件的一個傳值叫做buttonList

此時需要定義一個超過3的一個陣列

<ButtonGroup buttonList={aloudList} maxShowCount={3}></ButtonGroup>

功能要點 1

 const aloudList = [
            {
              title: '我是小紅',
              type: 'primary',
              hide: true,
            },
            {
                title: '我是小明',
                type: 'primary',
                hide: false,
              },
              {
                title: '我是小花',
                type: 'primary',
                hide: false,
                isPopconfirm:true,
                popTitle:"我是小花，你好呀",
                onClick: () => {
                    this.handleXiaoHua()
                }
              },
              {
                title: '我是小瓜',
                type: 'primary',
                hide: false,

              },
              {
                title: '我是小剛',
                type: 'primary',
                hide: false,
                isDelete:true,
                btnTxt:"我是小剛 洗掉我嗎",
                onClick: () => {
                    this.handleXiaoGang()
                }
              },
              {
                title: '我是小豬',
                type: 'primary',
                hide: false,
              
              },
              
          ];

1可以動態的控制按鈕的顯隱超過maxShowCount的部分會展示為更多操作

演示效果

此時我是小明/我是小紅/我是小花的按鈕會被顯示出來我們看一下演示的效果

超過maxShowcount大于三的部分會顯示為更多操作可以展開

功能要點2

2按鈕的樣式可以完全根據ant design的button屬性來都是父子組件進行傳值則改變一下資料格式這邊改變了一下button的type

   const aloudList = [
            {
              title: '我是小紅',
              type: 'primary',
              hide: true,
            },
            {
                title: '我是小明',
                type: 'primary',
              
                hide: false,
              },
              {
                title: '我是小花',
                type: 'primary',
                hide: false,
                isPopconfirm:true,
                popTitle:"我是小花，你好呀",
                onClick: () => {
                    this.handleXiaoHua()
                }
              },
              {
                title: '我是小瓜',
                type: 'link',
                hide: false,

              },
              {
                title: '我是小剛',
                type: 'primary',
                hide: false,
                isDelete:true,
                btnTxt:"我是小剛 洗掉我嗎",
                onClick: () => {
                    this.handleXiaoGang()
                }
              },
              {
                title: '我是小豬',
                type: 'primary',
                hide: false,
              
              },
              
          ];

演示效果

功能要點3

3可以動態的控制點擊按鈕的一個彈出提示 isDelete和isPopconfirm

    const aloudList = [
            {
              title: '我是小紅',
              type: 'primary',
              hide: true,
            },
            {
                title: '我是小明',
                type: 'primary',
              
                hide: false,
              },
              {
                title: '我是小花',
                type: 'primary',
                hide: false,
                isPopconfirm:true,
                popTitle:"我是小花，你好呀",
                onClick: () => {
                    this.handleXiaoHua()
                }
              },
              {
                title: '我是小瓜',
                type: 'link',
                hide: false,

              },
              {
                title: '我是小剛',
                type: 'primary',
                hide: false,
                isDelete:true,
                btnTxt:"我是小剛 洗掉我嗎",
                onClick: () => {
                    this.handleXiaoGang()
                }
              },
              {
                title: '我是小豬',
                type: 'primary',
                hide: false,
              
              },
              
          ];