feat: 城市选择行组件添加单选

src/components/selector/AreaSelector.vue

@@ -9,6 +9,7 @@
     <AreaSelectorContent
       ref="areaSelectorContent"
       :selectorType="selectorType"
+      :singleChoice="singleChoice"
       :initCityMap="initCityMap"
       @onChange="onChange"
     />
@@ -27,7 +28,11 @@ export default {
   props: {
     selectorType: {
       type: String,
-      default: 'card'
+      default: 'card' // card/line
+    },
+    singleChoice: { // 是是否单选? 只有在selectorType=line下才会生效
+      type: Boolean,
+      default: false
     },
     // 初始化城市数据
     // 刚进入页面需要被选中的城市数据

src/components/selector/AreaSelectorContent.vue

@@ -125,6 +125,10 @@ export default {
       type: String,
       default: 'card' // card/line
     },
+    singleChoice: { // 是是否单选? 只有在selectorType=line下才会生效
+      type: Boolean,
+      default: false
+    },
     // 初始化城市数据
     // 刚进入页面需要被选中的城市数据
     initCityMap: {
@@ -333,6 +337,9 @@ export default {
         if (province.name === '全国') {
           this.setCitySelected()
         } else {
+          if (this.singleChoice) {
+            this.setCitySelected()
+          }
           this.provinceListMap['#'][0].selectedState = ''
           this.expandedProvince.selectedState = 'checked'
         }
@@ -444,8 +451,17 @@ export default {
     // 城市选择按钮点击事件(card)
     // 根据城市的选择情况判断省份的选择情况
     changeCityStateForLine (province, city) {
+      if (this.singleChoice) {
+        this.setCitySelected()
+      }
+
       this.provinceListMap['#'][0].selectedState = ''
       province.selectedState = ''
+
+      if (this.singleChoice) {
+        // 单选情况下，需要先将其他选项取消掉
+        province.children.forEach(item => (item.selected = false))
+      }
       city.selected = !city.selected
       // 判断省份的选择状态
       let count = 0
@@ -487,6 +503,10 @@ export default {
     },
     // 省份点击事件(城市列表中的省份按钮)(line)
     clickProvinceInCityListForLine (province) {
+      if (this.singleChoice) {
+        this.setCitySelected()
+        this.provinceListMap['#'][0].selectedState = ''
+      }
       const state = province.selectedState
       province.children.forEach(v => (v.selected = false))
       if (state === 'checked') {
@@ -632,17 +652,15 @@ export default {
     },
     confirmCitySelected () {
       // 统计时候有城市被选中了
-      let count = 0
       const cityLength = this.expandedProvince.children.length
+      let count = 0
       if (cityLength) {
-        this.expandedProvince.children.forEach(v => {
-          // 前提是可点击的
-          if (v.canSelected && v.selected) {
-            count++
-          }
+        const selectedCityArr = this.expandedProvince.children.filter(v => {
+          return v.canSelected && v.selected
         })
+        count = selectedCityArr.length
       }
-      
+
       if (this.expandedProvince.selectedState !== 'checked' && cityLength !== 0 && count === 0) {
         return
       }

src/components/selector/SelectorCard.vue

@@ -66,7 +66,6 @@ export default {
           border-radius: 4px;
           font-size: 14px;
           text-align: center;
-          
           background-color: #fff;
           border: 1px solid rgba(0,0,0,.05);
           cursor: pointer;