,蚂蚁设计是一款十分出色的UI的设计组件,蚂蚁设计电脑版界面美观大方,功能强劲实用,软件包含整套开发和设计资源和工具,丰富的反应界面组件,能够为前端UI设计提供了新的解决方案,非常的方便实用哦
由于同事离职,公司缺人,他的工作便交接到我的手里了,我一个android开发者,以前也从来没做过网页端开发啊,没办法,领导交代的任务硬着头皮也得接下来啊!拿到手上,做的第一个功能,便是存储计划,需要实现可按照天,周,月存储,并且以鼠标圈选的形式实现,接下来附上自己的实现效果图:
本来拿到这个任务的时候,自己是想用网格实现的,但是看到官网上面的一句话,直接打消了我的念头,官网是这么说的:
也就是说用网格的每一行最多显示24个单元格,这个完全达不到我的要求,因为我每行需要显示25个单元格(每行的标题+ 24小时),我决定还是自己用div画吧。
画单元格分成第一行和剩余的行两种:
第一行组件我们定义为ColumsTitle:
循环里面的每一个div其实代表的是每一个单元格。
//标题列组件
const ColumsTitle=()=比;{
const科勒姆=[];
(让我=0;我& lt;25;我+ +){
如果(i==0) {
colums.push (& lt; div关键={我}className={风格(“columns-title-border”)}祝辞& lt;/div>);
其他}{
colums.push (& lt; div关键={我}className={风格(“columns-border-none”)}在{i - 1} & lt;/div>);
}
}
返回科勒姆;
}
剩余行组件,我们定义为科勒姆:
//列组件
类科勒姆延伸PureComponent {
呈现(){
const科勒姆=[];
(让我=0;我& lt;25;我+ +){
如果(i==0) {
colums.push (& lt; div关键={我}className={风格(“columns-title-border”)}在{this.props.rowName} & lt;/div>);
其他}{
colums.push (& lt; div id={this.props。rowName + i}={this.props的关键。rowName + i} className={风格(“columns-border”)} name=" chooseDiv祝辞& lt;/div>);
}
}
返回科勒姆;
}
}
最后一个就是整体上的组件了,我们叫做行:
//行组件
const行=(道具)=比;{
const行=[];
var rowLength=1;
var rowName=" ";
如果(道具。saveType==?”) {
rowLength=2;
}else if(道具。saveType==?”) {
rowLength=8;
}else if(道具。saveType==?”) {
rowLength=32;
}
(让我=0;我& lt;rowLength;我+ +){
rowName=formatRowName(道具,我);
如果(i==0) {
rows.push (& lt;行键={我}比;
& lt; div className={风格(“columns-title-out-margin”)}祝辞& lt; ColumsTitle/祝辞& lt;/div>
& lt;/Row>);
其他}{
rows.push (& lt;行键={我}比;
& lt; div className={风格(“columns-title-out”)}祝辞& lt;科勒姆saveType={道具。saveType} rowName={rowName}/比;
& lt;/div>
& lt;/Row>);
}
}
返回行;
};
我们渲染到SavePlan这个组件里面:
出口的默认类SavePlan延伸PureComponent {
构造函数(道具){
超级(道具);
这一点。状态={
saveType: " 1 "//1按天存储2按周存储3按月存储
}
}
handleRadioChange=e=比;{
这一点。设置状态({saveType: e.target.value});
}；
大?"大"在天存储& lt;/Radio.Button>
& lt;收音机。键值=" https://www.yisu.com/zixun/2 "祝辞周存储& lt;/Radio.Button>
& lt;收音机。键值=" https://www.yisu.com/zixun/3 "祝辞月存储& lt;/Radio.Button>
& lt;/Radio.Group>
& lt; div className={风格(“right-div”)}祝辞
存储周期:& lt; InputNumber min={1} max={10} defaultValue=https://www.yisu.com/zixun/{3} className={styles.btn}>确定> 取消>
