二级联动效果开发实例

版权声明：如要转发，请注明出处，小小喵的微博 https://blog.csdn.net/weixin_42881744/article/details/81738071

先看下效果图

类似这种效果如何开发下面进行讲解

注：这里做的不是组件封装，是以业务角度进行的代码开发，左侧数据过多，可以上下滑动，右侧也可以

html

<div v-transfer-dom>
    <popup v-model="state.timeFlag" :hide-on-blur="false" position="bottom" class="order-time-panel">
        <header class="ps-dj-title bdb-1px" @click="closeTime">配送时间<div class="close"></div></header>
        <div class="order-date row-pd-10">
            <div class="order-date-list">
                <ul class="data-p-list row-pd-10">
                    <li v-for="(item,index) in timeList" class="data-p-li" :class="{current:index==num}">
                        <span v-text="item.date" ref="menuItem" @click="switchDay(index)"></span>
                    </li>
                </ul>
                <ul class="data-p-time row-pd-10">
                    <li v-for="(item,index) in timeList" ref="ddList">
                        <dd  v-for="(timeItem,k) in item.timeSegementList" class="bdb-1px" :class="{current:k==timeNum}" v-show="index==num" @click="switchTime(k)" ref="ddItem">
                            <span v-text="timeItem"></span>
                            <i></i>
                        </dd>
                    </li>
                </ul>
            </div>
        </div>
    </popup>
</div>

less

.order-time-panel{
    font-family: 'PingFangSC-Regular';
   .ps-dj-title{
       color: #898989;
       background-color: #fff;
       .px2rem(line-height, 30);
       .px2rem(font-size, 30);
       .px2rem(padding, 30);
       text-align:center;
       .close{
           display: inline-block;
           background: url(../assets/image/close.png) no-repeat;
           position: absolute;
           .px2rem(width, 24);
           .px2rem(height, 22);
           .px2rem(background-size, 24,22);
           .px2rem(right, 32);
           .px2rem(top, 32);
       }
   }
   .order-date{
       bottom: 0;
       left: 0;
       z-index: 10001;
       background: #ffffff;
       text-align: center;            
       .order-date-list{
           .px2rem(font-size, 30);
           .data-p-time{
               float:left;
               width:60%;
               overflow:auto;
               background: #f0f2f5;
               color: #006d92;
               li{
                   position:relative;
               }
               dd{
                   display: inline-block;
                   position:relative;
                   color: #333;
                   text-align: left;
                   width: 87%;
                   .px2rem(height, 86);
                   .px2rem(line-height, 86);
                   &:last-child{
                       border-bottom:0;
                   }
                   i{display:none;}
                   &.current{
                       i{
                           display:block;
                           position:absolute;
                           background: url("../assets/image/blue_ok.png") no-repeat;
                           display: inline-block;
                           .px2rem(top, 30);
                           .px2rem(right, 140);
                           .px2rem(background-size, 28,20);
                           .px2rem(width, 28);
                           .px2rem(height, 20);
                       }
                   }
               }
           }
           .data-p-list{
               overflow: auto;
               position: relative;
               zoom: 1;
               float:left;
               width:40%;
               // height:calc(~"100%/2 - @px2rem_1");
               li{
                   float: left;
                   width: 100%;
                   text-align: left;
                   .px2rem(height, 88);
                   .px2rem(line-height, 88);
                   .px2rem(font-size, 30);
                   span{
                       float: left;
                       .px2rem(width, 260);
                       .px2rem(padding-left, 28);
                   }
               }
               li.current{
                   background: #f0f2f5;
                   color: #006d92;
               }
           }
       }
   }
}

px2rem的用法，请看我的另一篇博客https://blog.csdn.net/weixin_42881744/article/details/81544810
里面我有写怎么用
js

//切换日期
switchDay(index){
     //兄弟节点元素隐藏
     this.num = index;
     this.switchTime(0);
 },
 //切换时间段
 switchTime(index){
     this.timeNum = index;
 },

组件用的vux的TransferDom，弹框可以从底部滑动上来。
我这个例子只是抛砖引玉，希望对大家有所帮助，写出更精简的代码。