React 做了一个后台的微信自定义菜单栏同步的功能
做了一个后台的微信自定义菜单栏同步的功能
以下是效果图
代码实现如下，希望能对大家有帮助～
this.state = {
menuContents: [],
currentMenuContentIndex: 0,
currentMenuContentChidrenIndex: -1,
};
renderBox = () => {
const {
menuContents,
currentMenuContentIndex,
currentMenuContentChidrenIndex,
} = this.state;
if (!menuContents || menuContents.length === 0) {
return (
<div className="left-menu-main">
<div className="left-menu-bottom">
<div className="left-menu-item" onClick={this.addMenuContents}>
+
</div>
</div>
</div>
);
}
const deleteImage = require('./images/icon-delete.png');
const qianImage = require('./images/icon-qian.png');
const houImage = require('./images/icon-hou.png');
const shangImage = require('./images/icon-shang.png');
const xiaImage = require('./images/icon-xia.png');
return (
<div className="left-menu-main">
{menuContents.map((menuContent, index) => {
let style: CSSProperties = {
border: '1px solid #eee',
};
if (
currentMenuContentIndex === index &&
currentMenuContentChidrenIndex === -1
) {
style = {
border: '1px solid #07C160',
color: '#07C160',
backgroundColor: '#F2FCF7',
};
}
const lastIndex = menuContents.length - 1;
return (
<div className="left-menu-bottom" key={index}>
<div
className="left-menu-item"
style={style}
onClick={this.setCurrentIndex.bind(this, index, -1)}
>
<span className="left-menu-item-name">{menuContent.name}</span>
{currentMenuContentIndex === index &&
currentMenuContentChidrenIndex === -1 && (
<div
className="left-menu-item-line"
style={
currentMenuContentIndex === 1
? { left: '-25px' }
: undefined
}
>
{index !== 0 && (
<div
onClick={this.changeMenu.bind(
this,
'qian-parent',
index,
-1
)}
>
<img
className="icon-image"
alt=""
src={qianImage}
/>
</div>
)}
<div
onClick={this.deleteMenu.bind(
this,
'delete-parent',
index,
-1
)}
>
<img
className="icon-image"
alt=""
src={deleteImage}
/>
</div>
{index !== lastIndex && (
<div
onClick={this.changeMenu.bind(
this,
'hou-parent',
index,
-1
)}
>
<img
className="icon-image"
alt=""
src={houImage}
/>
</div>
)}
</div>
)}
</div>
{currentMenuContentIndex === index && (
<div className="left-submenu">
{menuContent.subMenus &&
menuContent.subMenus.map((chidren, cindex) => {
let chidrenStyle: CSSProperties = {
border: '1px solid #eee',
};
if (currentMenuContentChidrenIndex === cindex) {
chidrenStyle = {
border: '1px solid #07C160',
color: '#07C160',
backgroundColor: '#F2FCF7',
};
}
const lastCIndex = menuContent.subMenus.length - 1;
return (
<div key={cindex} className="left-menu-bottom">
<div
className="left-menu-item"
style={chidrenStyle}
onClick={this.setCurrentIndex.bind(
this,
index,
cindex
)}
>
<span className="left-menu-item-name">
{chidren.name}
</span>
{currentMenuContentChidrenIndex ===
cindex && (
<div className="left-menu-item-chidren-line-list">
<div className="left-menu-item-chidren-line">
{currentMenuContentChidrenIndex !==
0 && (
<div
onClick={this.changeMenu.bind(
this,
'qian-chidren',
index,
cindex
)}
>
<img
className="icon-image"
alt=""
src={shangImage}
/>
</div>
)}
<div
onClick={this.deleteMenu.bind(
this,
'delete-chidren',
index,
cindex
)}
>
<img
className="icon-image"
alt=""
src={deleteImage}
/>
</div>
{currentMenuContentChidrenIndex !==
lastCIndex && (
<div
onClick={this.changeMenu.bind(
this,
'hou-chidren',
index,
cindex
)}
>
<img
className="icon-image"
alt=""
src={xiaImage}
/>
</div>
)}
</div>
</div>
)}
</div>
</div>
);
})}
{menuContent.subMenus && menuContent.subMenus.length < 5 && (
<div className="left-menu-bottom">
<div
className="left-menu-item"
onClick={this.addMenuContentsChidren.bind(
this,
index
)}
>
+
</div>
</div>
)}
</div>
)}
</div>
);
})}
{menuContents.length < 3 && (
<div className="left-menu-bottom">
<div className="left-menu-item" onClick={this.addMenuContents}>
+
</div>
</div>
)}
</div>
);
};
addMenuContents = () => {
const { menuContents } = this.state;
menuContents.push({
name: '菜单名称',
menuContent: defalutMenuContent,
subMenus: [],
});
this.setState({
menuContents: cloneDeep(menuContents),
currentMenuContentIndex: menuContents.length - 1,
currentMenuContentChidrenIndex: -1,
});
};
addMenuContentsChidrenEvent = (index: number) => {
const { menuContents } = this.state;
menuContents[index].subMenus.push({
name: '子菜单名称',
menuContent: defalutMenuContent,
});
this.setState({
menuContents: cloneDeep(menuContents),
currentMenuContentIndex: index,
currentMenuContentChidrenIndex: menuContents[index].subMenus.length - 1,
});
};
addMenuContentsChidren = (index: number) => {
const { menuContents } = this.state;
if (!menuContents[index].subMenus || menuContents[index].subMenus.length === 0) {
Modal.confirm({
title: '添加子菜单后，一级菜单的内容将清除，确定添加子菜单？',
onOk: () => {
this.addMenuContentsChidrenEvent(index);
},
okText: '确认',
cancelText: '取消',
});
} else {
this.addMenuContentsChidrenEvent(index);
}
};
setCurrentIndex = (index: number, cindex: number) => {
this.setState({
currentMenuContentIndex: index,
currentMenuContentChidrenIndex: cindex,
});
};
deleteMenu = (type: string, index: number, cIndex: number) => {
let { menuContents } = this.state;
Modal.confirm({
title: '是否确认删除该菜单下配置的全部内容?',
onOk: () => {
if (type === 'delete-parent') {
menuContents.splice(index, 1);
} else if (type === 'delete-chidren' && cIndex > -1) {
menuContents[index].subMenus.splice(cIndex, 1);
}
this.setState({
menuContents: cloneDeep(menuContents),
currentMenuContentIndex: type === 'delete-parent' ? -1 : index,
currentMenuContentChidrenIndex: -1,
});
},
okText: '确认',
cancelText: '取消',
});
};
changeMenu = (type: string, index: number, cIndex: number) => {
let { menuContents } = this.state;
let currentMenuContentIndex = -1;
let currentMenuContentChidrenIndex = -1;
if (type === 'qian-parent') {
const newIndex = index - 1;
const info = menuContents[index];
menuContents.splice(index, 1);
menuContents.splice(newIndex, 0, info);
currentMenuContentIndex = newIndex;
}
if (type === 'hou-parent') {
const info = menuContents.splice(index, 1)[0];
menuContents.splice(index + 1, 0, info);
currentMenuContentIndex = index + 1;
}
if (type === 'hou-chidren' && cIndex > -1) {
const newcIndex = cIndex + 1;
const info = menuContents[index].subMenus[cIndex];
menuContents[index].subMenus.splice(cIndex, 1);
menuContents[index].subMenus.splice(newcIndex, 0, info);
currentMenuContentIndex = index;
currentMenuContentChidrenIndex = newcIndex;
}
if (type === 'qian-chidren' && cIndex > -1) {
const info = menuContents[index].subMenus.splice(cIndex, 1)[0];
menuContents[index].subMenus.splice(cIndex - 1, 0, info);
currentMenuContentIndex = index;
currentMenuContentChidrenIndex = cIndex - 1;
}
this.setState(
{
menuContents: cloneDeep(menuContents),
},
() => {
//必须在menuContents改变之后，不然栏目锁定不随着变
this.setState({
currentMenuContentIndex: currentMenuContentIndex,
currentMenuContentChidrenIndex: currentMenuContentChidrenIndex,
});
}
);
};