展开子分类滚动

components/pc/select/selectCard.vue

@@ -49,11 +49,12 @@
           <yun-icon name="down_arrow" size="10px" color="#999"></yun-icon>
           <yun-icon name="down_arrow" size="10px" color="#999"></yun-icon>
         </div>
         </div>
       </div>
       </div>
-      <div class="class-list-box" v-if="isShow && isShow2" @mouseleave="isShow=false">
+      <div class="class-list-box" ref="tagsBox" v-show="isShow && isShow2" @mouseleave="isShow=false">
         <select-content
         <select-content
           v-for="(item, index) in classList"
           v-for="(item, index) in classList"
           :item="item"
           :item="item"
           :key="`${item}${index}`"
           :key="`${item}${index}`"
+          @scrollTop="handleScroll"
           @select="handleChange2"
           @select="handleChange2"
         ></select-content>
         ></select-content>
       </div>
       </div>
@@ -174,6 +175,12 @@ export default {
       this.isShow2 = false;
       this.isShow2 = false;
       this.$emit('handleClass', this.value);
       this.$emit('handleClass', this.value);
     },
     },
+    handleScroll(num){
+      setTimeout(()=>{
+        this.$refs.tagsBox.scrollTop = this.$refs.tagsBox.scrollTop+40*(num>4?5:num)
+      })
+    },
+
     createTag() {
     createTag() {
       this.$popupbox({
       this.$popupbox({
         title: '创建标签',
         title: '创建标签',
@@ -317,7 +324,7 @@ export default {
   .class-list-box{
   .class-list-box{
     position: absolute;
     position: absolute;
     width: 196*$length;
     width: 196*$length;
-    height: 250*$length;
+    max-height: 250*$length;
     overflow-y: auto;
     overflow-y: auto;
     overflow-x: hidden;
     overflow-x: hidden;
     z-index: 999;
     z-index: 999;

components/pc/select/selectContent.vue

 <template>
 <template>
   <div>
   <div>
-    <div class="tag-box">
-      <p v-if="!isHot" @click="handleClick">{{item.tag}}</p>
-      <div v-if="isHot" @click="handleClick">{{item.tag}}（{{item.referenceCount}}）</div>
-      <yun-icon v-if="item.childList" @click="handleClick" :style="{paddingRight:'5px',transform:showChildList?'rotate(180deg)':'rotate(0)'}" name="down_arrow" size="8px" :color="showChildList?'#00AAE6':'#999'"></yun-icon>
-
+    <div class="tag-box" @click="handleClick">
+      <p v-if="!isHot" >{{item.tag}}</p>
+      <div v-if="isHot">{{item.tag}}（{{item.referenceCount}}）</div>
+      <yun-icon v-if="item.childList" :style="{paddingRight:'5px',transform:showChildList?'rotate(180deg)':'rotate(0)'}" name="down_arrow" size="8px" :color="showChildList?'#00AAE6':'#999'"></yun-icon>
     </div>
     </div>
     <div  v-if="item.childList&&showChildList" >
     <div  v-if="item.childList&&showChildList" >
-      <p class="tag-child" @click="handleChildClick(val.tag,val,tagId)" v-for="(val,index) in item.childList">{{val.tag}}</p>
+      <p class="tag-child" @click="handleChildClick(val.tag,val.tagId)" v-for="(val,index) in item.childList">{{val.tag}}</p>
     </div>
     </div>
   </div>
   </div>
 
 
@@ -24,6 +23,9 @@ export default {
       default: false
       default: false
     }
     }
   },
   },
+
+  watch:{
+  },
   data(){
   data(){
     return{
     return{
       showChildList:false
       showChildList:false
@@ -33,14 +35,14 @@ export default {
     handleClick(){
     handleClick(){
       if(this.item.childList){
       if(this.item.childList){
         this.showChildList = !this.showChildList;
         this.showChildList = !this.showChildList;
-
+        this.$emit('scrollTop',this.item.childList.length)
       }else {
       }else {
         this.$emit('select', this.item.tag, this.item.tagId);
         this.$emit('select', this.item.tag, this.item.tagId);
 
 
       }
       }
     },
     },
     handleChildClick(tag,id){
     handleChildClick(tag,id){
-      this.$emit('select', tag, id);
+      this.$emit('select',this.item.tag+'>'+ tag, id);
 
 
     }
     }
   }
   }
@@ -51,6 +53,8 @@ export default {
   .tag-box{
   .tag-box{
     @extend %flex-row-spb;
     @extend %flex-row-spb;
     border-bottom: 1px solid #F4F8FA;
     border-bottom: 1px solid #F4F8FA;
+    box-sizing: border-box;
+    padding-right: 10px;
 
 
     > div {
     > div {
       display: inline-block;
       display: inline-block;
@@ -80,7 +84,6 @@ export default {
 
 
   .tag-child {
   .tag-child {
     @include fontStyle(12, 40, 500, #999, center);
     @include fontStyle(12, 40, 500, #999, center);
-    padding-left: 20*$length;
     @extend %cursorPointer;
     @extend %cursorPointer;
     box-sizing: border-box;
     box-sizing: border-box;
     &:hover {
     &:hover {