欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用Ant Design写一个仿微软ToDo

程序员文章站 2022-03-24 17:59:32
实习期的第一份活,自己看Ant Design的官网学习,然后用Ant Design写一个仿微软ToDo。 不做教学目的,只是记录一下。 1、学习 Ant Design 是个组件库,想要会用,至少要知道React和ES6。 Ant Design 官网:https://ant.design/index- ......

实习期的第一份活,自己看ant design的官网学习,然后用ant design写一个仿微软todo。

不做教学目的,只是记录一下。

1、学习

ant design 是个组件库,想要会用,至少要知道react和es6。

ant design 官网:

可以看看官网的实战教学:

ant design pro 一个比较完整的开源项目,看里面的东西可以学习挺多的:

说实话,第一次接触 ant design 真的是一脸懵逼。

那时候我才知道原来前端已经不再是学习学的 html+css+javascript。

第一次见到 nodejs、react...(啊,原来我菜的这么真实嘛)

自己的学习过程其实就是看实战教学,照着把教学里的东西写一遍,理解里面几个比较关键的点。

布局与路由,model,props和states。

 

2、任务

仿写微软todo:

理想是这个样子的:

使用Ant Design写一个仿微软ToDo

 

                    2.1 微软todo任务界面 

现实是这个样子的:

使用Ant Design写一个仿微软ToDo

                    2.1 自己写的仿微软todo任务界面 

有些功能并没有实现,例如登录,还有超时,地图接口。其实挺多(cai)的。

 

3、分析

思路:

  主要先把布局和路由写了,然后就可以实现具体内容。

  整个项目需要用到的数据都是用mock的。

1)布局

  左边是窄窄的导航栏,主要就是头像、任务、便签、项目、地点、标签、搜索(邮件和...并没有写)

  右边就是内容。内容的分布格式是,上面标题或时间,下面内容。

2)功能

  任务功能:

  ①上部分是任务时间(根据时间展示任务)、任务展示方式(四象限或时间轴)、任务完成(已完成、未完成、全部)、添加新任务(就是那个 +)

  ②下部分默认四象限展示4种不同紧急程度的任务、点击任务前面的圆圈可以完成任务、单击任务名右边弹出任务详细,可修改删除。

  ③新增表单中项目、标签、位置提供已有的。

使用Ant Design写一个仿微软ToDo

                      3.1 任务界面新增功能

  便签功能:

  ①上部分标题

  ②下部分输入内容然后组合键生成右边的小便签

  ③小便签提供一个删除按钮

 使用Ant Design写一个仿微软ToDo

                  3.2 便签界面

  项目功能:

  ①上部分一个tab和添加项目功能

  ②下部分列出已有项目(项目里的任务数和完成数),点击项目会从右边弹出项目中的任务。

使用Ant Design写一个仿微软ToDo

                  3.3 项目界面

  地点、标签功能与项目类似,但是比项目简单一些。

  搜索功能只做了简单的根据任务名搜索。

 

4、实现

由于代码比较多,而且我写的挺乱的,所以取部分功能的代码贴出来。

贴的代码中,主要是组件的使用方式,方法没有贴上去。

1)配置布局和路由

const plugins = [
    ['umi-plugin-react', {
        antd: true,
        dva: true,
    }],
];

export default {
    plugins,
    routes: [
        {
            path: '/',
            component: '../layouts/baselayout',
            routes: [
                { path: '/', component: './task/task' },
                { path: '/task', component: './task/task' },
                { path: '/note', component: './note/note' },
                { path: '/project', component: './project/project' },
                { path: '/tag', component: './tag/tag' },
                { path: '/position', component: './position/position' },
                { path: '/search', component: './search/searchtext' },
            ]
        }
    ],
};

布局方面:

sidermenu是自己写的侧边栏组件,这里children会默认加载路由里component中的内容。

render() {
        const { children } = this.props;

        return (
            <div>
                <layout>
                    <sidermenu />
                    <layout>
                        <content>{children}</content>
                    </layout>
                </layout>
            </div>
        );
    };

2)任务功能

这个功能,本来是写在一个js文件中的,但是参考了 ant design pro 后,把一个js拆开了,写了几个组件。

render() {
        const { cardwidth, visible, buttontype, showtype, radiochecked, showdate, } = this.state;
        const { taskall, position, tag, project, form } = this.props;
        const { level1, level2, level3, level4, task, taskchoice } = taskall;
        const task_level = [level1, level2, level3, level4];
        const otherfield = {
            project: project,
            tag: tag,
            position: position,
            radiochecked: radiochecked,
        };
        // 头部标题
        const cardtitle = (
            <suspense fallback={null}>
                <cardtitle
                    showdate={showdate}
                    buttontype={buttontype}
                    handlechangebutton={this.handlechangebutton}
                />
            </suspense>
        );
        // 陈列方式菜单
        const menu_how = (
            <menu>
                <menu.item key='四象限' onclick={this.handleshow}>四象限{showtype === '四象限' ? <icon type='check' /> : null}</menu.item>
                <menu.item key='时间轴' onclick={this.handleshow}>时间轴{showtype === '时间轴' ? <icon type='check' /> : null}</menu.item>
            </menu>
        );
        // 陈列类型菜单
        const menu_show = (
            <menu>
                <menu.item key='全部'>全部<icon type='check' /></menu.item>
                <menu.item key='已完成'>已完成<icon type='null' /></menu.item>
                <menu.item key='未完成'>未完成<icon type='null' /></menu.item>
            </menu>
        );
        // 右侧按钮组件
        const cardextra = (
            <fragment>
                <dropdown overlay={menu_how} trigger={['click']} style={{ padding: '0' }}>
                    <button>{showtype}<icon type='caret-down' /></button>
                </dropdown>
                <space></space>
                <dropdown overlay={menu_show} trigger={['click']}>
                    <button>全部<icon type='caret-down' /></button>
                </dropdown>
                <space></space>
                <button style={buttonborderstyle}
                    type='primary' ghost size='large'
                    onclick={() => this.showdrawer()}><icon type='plus' /></button>
            </fragment>
        );
        //抽屉按钮
        const drawerbutton = ({ button1_click, button1_text, button2_click, button2_text }) => (
            <fragment>
                <avatar icon='user'></avatar>
                <button.group>
                    <button style={buttonborderstyle}><icon type='file' /></button>
                    <button style={buttonborderstyle}><icon type='bars' /></button>
                    <button style={buttonborderstyle}><icon type='retweet' /></button>
                </button.group>
                <space /><space />
                <button style={buttonborderstyle} onclick={button1_click}>{button1_text}</button>
                <button style={buttonborderstyle} ghost type='primary' onclick={button2_click}>{button2_text}</button>
            </fragment>
        );
        // 抽屉标题按钮
        const drawertitle = taskchoice && (taskchoice.taskid === null) ?
            (
                <drawerbutton
                    button1_click={this.onclose}
                    button1_text={'取消'}
                    button2_click={this.handlesave}
                    button2_text={'保存'}
                ></drawerbutton>
            ) : (
                <drawerbutton
                    button1_click={this.handleremove}
                    button1_text={'删除'}
                    button2_click={this.onclose}
                    button2_text={'关闭'}
                ></drawerbutton>
            );
        return (
            <div>
                <card
                    headstyle={{ height: '65px' }}
                    title={cardtitle}
                    extra={cardextra}
                    style={cardwidth}
                >
                    <suspense fallback={null}>
                        {showtype === '四象限' ?
                            <cardlist
                                datasource={task_level}
                                showdrawer={this.showdrawer}
                                finished={this.handlefinished} />
                            :
                            <timelinelist
                                datasource={task}
                                showdrawer={this.showdrawer}
                                finished={this.handlefinished} />
                        }
                    </suspense>
                </card>
                <drawer
                    title={drawertitle}
                    placement='right'
                    mask={false}
                    width={400}
                    closable={false}
                    visible={visible}
                >
                    <suspense fallback={null}>
                        <taskform
                            {...otherfield}
                            onchange={this.onchangeradio}
                            form={form}
                            taskc={taskchoice}
                            handlesubmit={this.handlesave}
                        ></taskform>
                    </suspense>
                </drawer>
            </div>
        );
    }

 头部标题:

const cardtitle = ({ handlechangebutton, buttontype, showdate }) => (
    <fragment>
        <row type='flex' align='middle' gutter={8} justify='start' style={{ width: '480px' }}>
            <col span={6}>
                {showdate}
            </col>
            <col span={3}>
                <button.group>
                    <button icon='left' style={buttonborderstyle} ></button>
                    <button icon='right' style={buttonborderstyle} ></button>
                </button.group>
            </col>
            <col span={4}>
                <button value='day'
                    type={buttontype === 'day' ? 'primary' : 'default'}
                    onclick={handlechangebutton}>今天</button>
            </col>
            <col span={11}>
                <button.group onclick={handlechangebutton}>
                    <button value='day' type={buttontype === 'day' ? 'primary' : 'default'}>日</button>
                    <button value='week' type={buttontype === 'week' ? 'primary' : 'default'}>周</button>
                    <button value='month' type={buttontype === 'month' ? 'primary' : 'default'}>月</button>
                </button.group>
            </col>
        </row>
    </fragment>
);

 

5、总结

哇,这人贼懒,写个东西都不好好写,代码也就贴一丢丢。

emmm。。

等我把项目代码传到github上后给个链接吧。

写完这个其实收获挺多的,但是要我说出来,又一时语塞。

有很多想要表达的东西,通篇写下来发现并没有表达到,自己第一次写博客,也是太菜了。。

嗯。。如果有人一不小心浪费时间翻到这里,给你说个抱歉,哈哈哈。

以后尽量提高自己的博客质量。

 诺~链接:https://github.com/lighter1187/todo