浏览代码

fix: 修复ios下样式问题、多选删除问题,增加isLockBgScroll是否锁定背景滚动配置

dushoujun 5 年之前
父节点
当前提交
3ddeb73f71
共有 3 个文件被更改,包括 78 次插入69 次删除
  1. 45 44
      src/packages/tabselect/doc.md
  2. 1 1
      src/packages/tabselect/tabselect.scss
  3. 32 24
      src/packages/tabselect/tabselect.vue

+ 45 - 44
src/packages/tabselect/doc.md

@@ -39,93 +39,93 @@ export default {
   components: {},
   data() {
     return {
-      mainTitle: '配送',
-      subTitle: '送达时间',
+      mainTitle: "配送",
+      subTitle: "送达时间",
       defaultContent: [
-        '9:00——10:00',
-        '10:00——11:00',
-        '11:00——12:00',
-        '12:00——13:00',
-        '13:00——15:00',
-        '15:00——17:00',
-        '17:00——19:00'
+        "9:00——10:00",
+        "10:00——11:00",
+        "11:00——12:00",
+        "12:00——13:00",
+        "13:00——15:00",
+        "15:00——17:00",
+        "17:00——19:00",
       ],
       tabList: [
         {
-          tabTitle: '京东快递', // 一级tab标题
+          tabTitle: "京东快递", // 一级tab标题
           children: [
             // 一级tab内容
             {
-              tabTitle: '1月13日 (星期一)', // 二级tab标题
+              tabTitle: "1月13日 (星期一)", // 二级tab标题
               content: [
                 // 二级tab内容,不传默认使用defaultContent字段
-                '11:00——12:00',
-                '12:00——13:00',
-                '13:00——15:00',
-                '15:00——17:00',
-                '17:00——19:00'
-              ]
+                "11:00——12:00",
+                "12:00——13:00",
+                "13:00——15:00",
+                "15:00——17:00",
+                "17:00——19:00",
+              ],
             },
             {
-              tabTitle: '1月14日 (星期二)'
+              tabTitle: "1月14日 (星期二)",
             },
             {
-              tabTitle: '1月15日 (星期三)'
+              tabTitle: "1月15日 (星期三)",
             },
             {
-              tabTitle: '1月16日 (星期四)'
+              tabTitle: "1月16日 (星期四)",
             },
             {
-              tabTitle: '1月17日 (星期五)'
+              tabTitle: "1月17日 (星期五)",
             },
             {
-              tabTitle: '1月18日 (星期六)'
+              tabTitle: "1月18日 (星期六)",
             },
             {
-              tabTitle: '1月19日 (星期天)'
-            }
-          ]
+              tabTitle: "1月19日 (星期天)",
+            },
+          ],
         },
         {
-          tabTitle: '上门自提',
+          tabTitle: "上门自提",
           children: [
             {
-              tabTitle: '2月13日 (星期一)',
-              content: ['13:00——15:00', '15:00——17:00', '17:00——19:00']
+              tabTitle: "2月13日 (星期一)",
+              content: ["13:00——15:00", "15:00——17:00", "17:00——19:00"],
             },
             {
-              tabTitle: '2月14日 (星期二)'
+              tabTitle: "2月14日 (星期二)",
             },
             {
-              tabTitle: '2月15日 (星期三)'
+              tabTitle: "2月15日 (星期三)",
             },
             {
-              tabTitle: '2月16日 (星期四)'
+              tabTitle: "2月16日 (星期四)",
             },
             {
-              tabTitle: '2月17日 (星期五)'
+              tabTitle: "2月17日 (星期五)",
             },
             {
-              tabTitle: '2月18日 (星期六)'
+              tabTitle: "2月18日 (星期六)",
             },
             {
-              tabTitle: '2月19日 (星期天)'
-            }
-          ]
-        }
+              tabTitle: "2月19日 (星期天)",
+            },
+          ],
+        },
       ],
-      show: false
-    }
+      show: false,
+    };
   },
   methods: {
     choose(title, item) {
-      console.log(title, item)
+      console.log(title, item);
     },
     onOkBtn(event) {
-      console.log(event)
-    }
-  }
-}
+      console.log(event);
+    },
+  },
+};
 ```
 
 ### Prop
@@ -140,6 +140,7 @@ export default {
 | show              | 是否显示                                   | Boolean | false    |
 | max               | 多选时最多可选个数                         | Number  | Infinity |
 | isDefaultSelected | 单选时是否默认选中第一项(多选默认不选中) | Boolean | false    |
+| isLockBgScroll    | 是否锁定背景滚动                           | Boolean | true     |
 
 ### Event
 

+ 1 - 1
src/packages/tabselect/tabselect.scss

@@ -43,7 +43,7 @@
       min-width: 158px;
     }
     .nut-title-nav {
-      height: 40px;
+      min-height: 40px;
       line-height: 40px;
       background: #f4f4f4;
       padding-left: 18px;

+ 32 - 24
src/packages/tabselect/tabselect.vue

@@ -6,6 +6,7 @@
       v-model="isShow"
       position="bottom"
       :style="{ height: '457px' }"
+      :lock-scroll="isLockBgScroll"
     >
       <div class="nut-tabselect-main-title" v-html="mainTitle"></div>
       <nut-tab @tab-switch="tabSwitchOuter" :init-data="list">
@@ -35,7 +36,7 @@
                     @click="choose(idx, index, sIndex, item, sitem)"
                     class="nut-tab-panel-list"
                     :class="{
-                      'nut-tab-panel-list-active': isActive(idx, index, sIndex)
+                      'nut-tab-panel-list-active': isActive(idx, index, sIndex),
                     }"
                   >
                     {{ sitem }}
@@ -48,7 +49,7 @@
                     @click="choose(idx, index, sIndex, item, sitem)"
                     class="nut-tab-panel-list"
                     :class="{
-                      'nut-tab-panel-list-active': isActive(idx, index, sIndex)
+                      'nut-tab-panel-list-active': isActive(idx, index, sIndex),
                     }"
                   >
                     {{ sitem }}
@@ -75,36 +76,40 @@ export default {
   props: {
     mainTitle: {
       type: String,
-      default: ""
+      default: "",
     },
     subTitle: {
       type: String,
-      default: ""
+      default: "",
+    },
+    isLockBgScroll: {
+      type: Boolean,
+      default: true,
     },
     defaultContent: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     tabList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     show: {
       type: Boolean,
-      default: false
+      default: false,
     },
     multiple: {
       type: Boolean,
-      default: false
+      default: false,
     },
     max: {
       type: Number,
-      default: Infinity
+      default: Infinity,
     },
     isDefaultSelected: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
@@ -114,12 +119,12 @@ export default {
       level2: this.isDefaultSelected ? new Set(["0-0"]) : new Set(),
       allChoose: this.getText(0, 0, this.isDefaultSelected ? 0 : null),
       list: [],
-      defIndex: 0
+      defIndex: 0,
     };
   },
   components: {
     [nuttab.name]: nuttab,
-    [nutpop.name]: nutpop
+    [nutpop.name]: nutpop,
   },
   watch: {
     show(val) {
@@ -139,8 +144,8 @@ export default {
         this.allChoose = this.getText(0, 0, this.isDefaultSelected ? 0 : null);
         this.emit();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   mounted() {
     this.list = this.tabList;
@@ -196,7 +201,13 @@ export default {
     choose(idx, index, sIndex) {
       if (this.multiple && this.isActive(idx, index, sIndex)) {
         this.unChoose(index, sIndex);
-        this.allChoose.delete(this.getText(idx, index, sIndex));
+        this.getText(idx, index, sIndex).forEach((o) => {
+          for (let indexdel of this.allChoose.values()) {
+            if (JSON.stringify(o) === JSON.stringify(indexdel)) {
+              this.allChoose.delete(indexdel);
+            }
+          }
+        });
         this.emit();
         return;
       }
@@ -216,12 +227,9 @@ export default {
       }
       this.emit();
     },
-    clickHandler (event) {
-      this.$emit(
-        "onOkBtn",
-        event
-      )
-      this.isShow = false
+    clickHandler(event) {
+      this.$emit("onOkBtn", event);
+      this.isShow = false;
     },
     isActive(idx, index, sIndex) {
       if (
@@ -232,7 +240,7 @@ export default {
         return true;
       }
       return false;
-    }
-  }
+    },
+  },
 };
 </script>