Vue项目详情页 - 使用递归组件实现详情页列表

分手后的思念是犯贱 2022-04-13 03:53 526阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 3][]

此时list已经显示出来

如何使用递归组件实现详情页列表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 6][]

父组件Detail.vue里的父组件

这时分类就会显示出来

然后布局样式

一级列表项已经显示出来了,然后如何显示二级列表项呢

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 8][]

这里的二级关系.自己调用他自己的这个组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 9][]

但是没有层级关系

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 11][]

这时是三级列表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 12][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 13][]

但是头部景点并没有完全盖住下方的字体

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 14][]

这是list.vue

<template>
        <div>
          <div
            class="item"
            v-for="(item,index) of list"
            :key="index"
          >
            <div class="item-title border-bottom">
              <span class="item-title-icon"></span>
              {
      {item.title}}
            </div>
            <div v-if="item.children" class="item-chilren">
              <detail-list :list="item.children"></detail-list>
            </div>
          </div>
        </div>
    </template>
    
    <script>
        export default {
            name: "DetailList",
            props:{
              list:Array
            }
        }
    </script>
    
    <style lang="stylus" scoped>
      .item-title-icon
        position: relative
        left: .06rem
        top: .06rem
        display: inline-block
        width: .36rem
        height: .36rem
        background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat
        margin-right: .1rem
        background-size: .4rem 3rem
      .item-title
        line-height: .8rem
        font-size: .32rem
        padding: 0 .2rem
      .item-chilren
        padding: 0 .2rem
    </style>

这是detail.vue

<template>
        <div>
          <detail-banner></detail-banner>
          <detail-header></detail-header>
          <div class="content">
            <detail-list :list="list"></detail-list>
          </div>
        </div>
    </template>
    
    <script>
      import DetailBanner from './components/Banner'
      import DetailHeader from './components/Header'
      import DetailList from './components/List'
        export default {
            name: "Detail",
            components:{
              DetailHeader,
              DetailBanner,
              DetailList
            },
            data(){
              return {
                list:[{
                title:'成人票',
                children:[{
                  title:'成人档案票',
                  children:[{
                    title:'成人三观联票-莫以连锁店销售'
                  }]
                },{
                  title:'陈然三馆联票'}
                ]
                },{
                title:'学生票'
                },{
                title:'儿童票'
                },{
                title:'特惠票'
                }
                ]
              }
            }
        }
    </script>
    
    <style lang="stylus" scoped>
    
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70]: /images/20220413/33d0436d3a33411485437e3088f375d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 1]: /images/20220413/89646f57f14b498fbc4e7bab2487b528.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 2]: /images/20220413/bb51ae90ef6449718ea288c476cde94c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 3]: /images/20220413/aa3ad5105b154b369203555ceeed64d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 4]: /images/20220413/0ee0dc65151746abbba39d77d0f366e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 5]: /images/20220413/501924fe715b4537899ad4eaf586a2e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 6]: /images/20220413/7bbfefee0c914370b41e9fe9b9be746f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 7]: /images/20220413/f956cba254144c368d473ee1af59e49b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 8]: /images/20220413/d346294bdef64522b7412a1b95a184f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 9]: /images/20220413/45e29baaf51542b69714beeccc4addf5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 10]: /images/20220413/0a8a709266004d36b2f469842f12a8d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 11]: /images/20220413/b6d1574239ff4d7caf255717b7f4699f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 12]: /images/20220413/787bfb1e4b8b4f708237108e49ef5e07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 13]: /images/20220413/47cb1b214843490b8d18b383473ce7c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 14]: /images/20220413/61ee7dc7e0904e489112cfd1df276ba9.png