H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【element-ui】【求助】携程的这个页面在VUE下该怎么设计比较好?单页面下能否组件化

微信截图_20191122215209.png

问题一:

携程的一个旅游行程设计页面如上图

设计的行程大概是这样的:
-第一天
--交通
---租车
--景点
---XX景点
---XX景点
--餐饮
---XX中饭
--景点
---XX景点
---XX景点
--酒店
---A酒店 或者 B酒店
-第二天
--交通
---租车
--景点
---XX景点
---XX景点
--餐饮
---XX中饭
--景点
---XX景点
---XX景点
--酒店
---A酒店 或者 B酒店

vue下大概是这样来设计的

tour:[{
    title:'',                                        //行程的名字
    date:'',                                        //行程的出发时间
    children:[{                                        //项目
        type:1,                                        //项目的类型
        title:'景点',                                //项目的名字
        children:[{                                    //景点
            id:1,                                    //景点id
            title:'XX景点',                            //景点名字
            image:'http://www.xxx.com/xxx.jpg',    //景点图片
        },children:[{                                    //景点
            id:2,                                    //景点id
            title:'XX景点',                            //景点名字
            image:'http://www.xxx.com/xxx.jpg',    //景点图片
        }]
    },{
    ..................
    }]
},{
..................
}]

按照上面的tour结构,再加template、style、script就很臃肿了
目前vue-cli下制作的话单页面代码都堆在一起
不知如何能够合理的组件化,简化这个页面代码???


问题二:

微信截图_20191122215154.png
如图
目前比如已经把“选择图片”做成了组件,点击后,dialog弹出组件
因为要传输景点的ID给子组件,然后返回图片的URL给父组件,并赋值给相应的景点
所有要props,tour结构的每个节点信息,如tour[第几天].children[第几个] .children[第几个],
传的参数比较多,是否有合理点的方法???

回答:

问题一:组件结构可以这样划分:
–父组件

--第N天
    --机票
    --景点(还可以细分,每个景点选项)
    --餐饮
    --...

问题二:
组件结构划分得够细后,对应的子组件只接收相关的数据,数据处理起来也不会出现tour[第几天].children[第几个] .children[第几个]这种情况了。

回答:

你邀请错人了,因为我写代码有过度封装的习惯,连 86400000 都要写成常量的那种。

首先,从“机票”到“活动”每种行程各封装成一个行程组件;
然后,封装一个这些组件的代理组件,代理接收一个 type 参数指定行程的模式,其他参数则直接透传给行程组件;
再后,封装一个日期组件,负责展示一天的行程总计;
最后,数据用 Vuex 或者 Redux 管理,将各个日期的拼接并展示。

代理组件可以不要,其存在是为了让引用行程组件的代码看起来整齐一点,但是代码的可读性会降低。
如果配置 JSX 和 TS 的话就更加明晰了。

回答:

–交通
–景点
–餐饮
–酒店。。。。
以这写大的行程点拆分就行了 每天都是重复的

另外数据结构尽可能扁平 比如你上面的景点 完全可以不用数组 type标记一下就可以了

回答:

从你的数据结构里就可以划分组件啦

[
{}
{}
{}
]

每一个数组以及子数组下面的元素都是一种格式,那你就可以按照数组/子数组来不断划分组件了阿。

至于ui组件,那就比较随意了,用的多的都可以封装,或者代码量大的,也可也提取出来。

回答:

从情景来看,代码重用度还是很高的,时间线有现成的,不考虑
可以把“天封装成拥有一组行为的组件”
把每一种行为封装成一个组件

本文地址:H5W3 » 【element-ui】【求助】携程的这个页面在VUE下该怎么设计比较好?单页面下能否组件化

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址