美文网首页
Antd-UI && Button 复用

Antd-UI && Button 复用

作者: Lisburn | 来源:发表于2020-09-24 16:30 被阅读0次

    相较于前端来说,组件的复用、简化要求日益严格,自己怎么写不重要,但是工作中显然不可能一个人负责全部,除开必要的代码简化,组件复用也需要变得更加灵活,下面是我在工作中产生的复用问题及解决办法。

    项目是基于Ant Design Vue

    一、需求
    公司目前有接近20张表【这部分已经模块化,日后更新】,每张表都会有一个【Creat】入口和【RowClick】入口,根据入口不同,在vue created中生成不同状态的Detail页面,而Detail页面含有包括SUBMIT、SAVE、LOCK、UNLOCK、DELETE、BACK、START等多个按钮

    二、问题
    按照一个Detail一组按钮,一个按钮一个接口的话,无疑会增几十上百个接口,为了解决接口过多,代码泛滥的情况,我和后端统一了接口名,并高度复用,适用所有包含按钮的组件

    三、代码
    公共JS文件中

    /* 
    name : 按钮名
    pageType:页面入口【exp:experiment】
    */
    button(name , pageType){
     /*比对*/
            switch(name){
                case 'SUBMIT' : {
                    e.preventDefault();
                    this.form.validateFields((err, values) => {
                        if (!err) {
                            this.axios({
                                method: 'post',
                                url: '/api/'+ pageType + '/add',
                                /* url = '/api/experiment/add' */
                                data : values ,
                            }).then( data => {
                            }).catch( error =>{
                            });
                        }
                    });
                break;
                };
                case 'DELETE' : {
                    e.preventDefault();
                    this.form.validateFields((err, values) => {
                        if (!err) {
                            this.axios({
                                method: 'post',
                                url: '/api/'+ pageType + '/delete',
                                /* url = '/api/experiment/delete' */
                                data : values ,
                            }).then( data => {
                            }).catch( error =>{
                            });
                        }
                    });
                break;
                }
            }
        }, 
    

    相关文章

      网友评论

          本文标题:Antd-UI && Button 复用

          本文链接:https://www.haomeiwen.com/subject/zvujyktx.html