目录
前言
导语
父子组件调用
父组件
第一步
第二步
子组件
数据演示
功能要点 1
演示效果
功能要点2
演示效果
功能要点3
演示结果
总结
前言
我是歌谣 我有个兄弟 巅峰的时候排名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}><Buttonloading={item.loading}icon={item.icon}type={item.type || 'link'}className={styles.menuBtn}>{item.title}</Button></Popconfirm></Menu.Item>) : (<Menu.Item key={index}><Buttonloading={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 (<divstyle={{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}><Buttonstyle={{ 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}><Buttonstyle={{ marginLeft: 8 }}loading={item.loading}icon={item.icon}type={item.type}>{item.title}</Button></Popconfirm>) : (<Buttonstyle={{ 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,},];
演示结果
总结
在过往的岁月中,我遇到了形形色色的人和事情。有的人坚持，有的人放弃。 有的人逆袭，有的人失败。最好的种树是十年前，其次是现在。很高兴遇到你, 愿你的人生多姿多彩，幸福绵绵，好事连连
