fix: 修复城市选择行组件城市列表插入问题

src/assets/js/selector.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 // 城市选择/筛选 - 省份与字母IndexBar对照数据
 // 在[@/components/selector/AreaSelectorCard.vue]中使用
 export const provinceListMapExp = {

src/components/selector/AreaSelector.vue

@@ -5,7 +5,7 @@
     @onConfirm="onConfirm"
     @onCancel="onCancel">
     <div slot="header" v-if="selectorType === 'card'" key="header">选择区域</div>
-    <div slot="header" class="s-header" v-if="selectorType === 'line'" key="header">选择区域:</div>
+    <div slot="header" class="s-header" v-if="selectorType === 'line'" key="header">选择区域：</div>
     <AreaSelectorContent
       ref="areaSelectorContent"
       :selectorType="selectorType"
@@ -53,8 +53,8 @@ export default {
       const selectedCity = this.getSelectedCity()
       this.$emit('onConfirm', selectedCity)
     },
-    onChange (city) {
-      this.$emit('onChange', city)
+    onChange (selected) {
+      this.$emit('onChange', selected)
     }
   }
 }

src/components/selector/AreaSelectorContent.vue

@@ -220,7 +220,6 @@ export default {
     this.initIndexBarAndAreaMap()
     this.provinceListMap['#'][0].selectedState = 'checked'
     this.setCitySelected(this.initCityMap)
-    window.data = this
   },
   methods: {
     // 整理城市数据列表(并初始化indexBar数据)
@@ -327,7 +326,6 @@ export default {
         children: []
       }
       province.expanded = true
-      console.log(province, province.name)
       // 省份数据与原数据分离(点击确定覆盖原数据，点击取消则不保存数据)
       this.expandedProvince = JSON.parse(JSON.stringify(province))
       // 如果直接点击直辖市
@@ -346,13 +344,13 @@ export default {
     moveTheCityContainer (e) {
       // 距离最近一个定位元素的高度6,44,80. 一个公差为36的等差数列
       const offsetTop = e.target.offsetTop
-      const lineFirstDom = this.getLineFirstDom()
+      const { lineFirstDom, insetLine, tolerance } = this.getLineFirstDom()
       const selectList = this.$refs.selectList
       const cityList = this.$refs.cityList
       // 如果页面上cityList插入中间(除了插入到末尾)，则都会产生误差，所以需要根据情况减去其高度
       let correct = cityList.getBoundingClientRect().height
       // 最后一行则不减去correct
-      if (cityList.getBoundingClientRect().top > 36 * lineFirstDom.length + 6) {
+      if (insetLine === 0 || insetLine === tolerance.length) {
         correct = 0
       }
       const line = Math.floor((offsetTop - correct) / 36) + 1
@@ -363,19 +361,11 @@ export default {
       } else {
         selectList.insertBefore(cityList, lineFirstDom[line])
       }
-      // 如果点击的是第一行，则要求插入下一行的前面
-      // absolute定位下可以使用
-      // this.$nextTick(() => {
-      //   const selectList = this.$refs.selectList
-      //   const cityList = this.$refs.cityList
-      //   if (cityList) {
-      //     cityList.style.top = `${e.target.getBoundingClientRect().top - selectList.getBoundingClientRect().top + 26}px`
-      //   }
-      // })
     },
     getLineFirstDom () {
       if (this.selectorType !== 'line') return
       const indexTopList = []
+      const tolerance = [] // 行间距差值
       const lineFirstDom = [
         ...this.$refs[`index-item-${this.indexList[0]}`]
       ]
@@ -387,12 +377,26 @@ export default {
       })
       for (let i = 0; i < indexTopList.length; i++) {
         if (indexTopList[i + 1] > indexTopList[i]) {
+          tolerance.push(indexTopList[i + 1] - indexTopList[i])
           lineFirstDom.push(
             ...this.$refs[`index-item-${this.indexList[i + 1]}`]
           )
         }
       }
-      return lineFirstDom
+      let insetLine = 0
+      // 求平均值，谁的值大于平均值，就在哪一行
+      const avg = tolerance.reduce((prev, item) => prev + item) / tolerance.length
+      for (let j = 0; j < tolerance.length; j++) {
+        if (tolerance[j] > avg) {
+          insetLine = j + 1
+        }
+      }
+      return {
+        lineFirstDom,
+        indexTopList,
+        tolerance,
+        insetLine
+      }
     },
     // 城市选择按钮点击事件(card)
     // 根据城市的选择情况判断省份的选择情况
@@ -794,13 +798,6 @@ export default {
       }
     }
 
-    [class^=el-icon-] {
-      transition: transform 0.2s ease;
-    }
-    .rotate180 {
-      transform: rotate(180deg);
-    }
-
     .j-button-item {
       border-color: transparent;
     }
@@ -903,11 +900,6 @@ export default {
         background-color: #f5f5fb;
         border-radius: 4px;
         border: 1px solid #E0E0E0;
-        &.absolute {
-          position: absolute;
-          top: 0;
-          left: 0;
-        }
         .city-item {
           display: inline-block;
           margin: 0 4px 4px;