手写v项目中横向类tab（可展开与收起）功能

背景：

在本次项目需求中涉及区域名称的展示，点击更多可以展开和点击收起即收起。项目框架：vue。
设计如图：

展开：

element也有tab标签组件，有类似效果，这里决定自己手写一个原生的，点击事件也好控制。新建一个view页面，可以封装组件，再有其他地方使用时就可直接用。

1. HTML部分

   1.展开与收起的动画是采用在点击事件中改变状态，根据不同状态写不同的样式来实现的。

   2.点击事件中传入索引，当前索等于for循环的索引时代表选中了当前区域名称，然后绑定样式即可。

   3.for循环遍历展示数据，里面包裹一层span主要是是选中区域名称下面的border宽度保持与字体宽度一致

   <template>
     <div class="mapCode-main">
       <!-- 区域名称展示 -->
       <div class="zoneNames" >
         <div class="zone-wrap"
         :class="{foldHeight: !isFold}">
           <ul v-if="zoneList.length>0" style="width:90%">
             <li
               v-for="(item, index) in zoneList"
               :key="item.id"
               :title="item.name"
             >
             <!-- 里面包裹一层span主要是是选中区域名称下面的border宽度保持与字体宽度一致 -->
               <span
                 class="zoneNameli"
                 :class="{activeZone:currentIndex===index}"
                 @click="hindleTabZone(item.id, index)">
                 {
       {item.name}}
               </span>
             </li>