Merge branches 'v2' and 'v2' of https://github.com/jdf2e/nutui into v2

src/packages/tabselect/__test__/tabselect.spec.js

@@ -8,12 +8,14 @@ describe("TabSelect.vue", () => {
   it("mainTitle标题", () => {
     wrapper.setProps({ mainTitle: "配送" });
     return Vue.nextTick().then(function() {
-      expect(
-        wrapper
-          .findAll(".nut-tabselect-main-title")
-          .at(0)
-          .text()
-      ).toBe("配送");
+      setTimeout(() => {
+        expect(
+          wrapper
+            .findAll(".nut-tabselect-main-title")
+            .at(0)
+            .text()
+        ).toBe("配送");
+      }, 200);
     });
   });
 

src/packages/tabselect/demo.vue

@@ -16,6 +16,7 @@
       @close="show = false"
       @choose="choose"
       :multiple="false"
+      :isDefaultSelected="true"
     ></nut-tabselect>
 
     <nut-cell
@@ -121,6 +122,11 @@ export default {
       showMore: false
     };
   },
+  //   mounted() {
+  //     setTimeout(() => {
+  //       this.tabList[0].tabTitle = "测试";
+  //     }, 10000);
+  //   },
   methods: {
     choose(title, item) {
       console.log(title, item);

src/packages/tabselect/doc.md

@@ -12,6 +12,7 @@
   @close="show = false"
   @choose="choose"
   :multiple="false"
+  :isDefaultSelected="true"
 ></nut-tabselect>
 ```
 
@@ -124,15 +125,16 @@ export default {
 
 ### Prop
 
-| 字段           | 说明                        | 类型    | 默认值   |
-| -------------- | --------------------------- | ------- | -------- |
-| mainTitle      | 一级 tab 标题               | String  | ''       |
-| subTitle       | 二级 tab 标题               | String  | ''       |
-| defaultContent | 二级 tab 下内容完全一致时传 | Array   | null     |
-| multiple       | 是否允许多选                | Boolean | false    |
-| tabList        | 整体数据                    | Array   | null     |
-| show           | 是否显示                    | Boolean | false    |
-| max            | 多选时最多可选个数          | Number  | Infinity |
+| 字段              | 说明                                       | 类型    | 默认值   |
+| ----------------- | ------------------------------------------ | ------- | -------- |
+| mainTitle         | 一级 tab 标题                              | String  | ''       |
+| subTitle          | 二级 tab 标题                              | String  | ''       |
+| defaultContent    | 二级 tab 下内容完全一致时传                | Array   | null     |
+| multiple          | 是否允许多选                               | Boolean | false    |
+| tabList           | 整体数据                                   | Array   | null     |
+| show              | 是否显示                                   | Boolean | false    |
+| max               | 多选时最多可选个数                         | Number  | Infinity |
+| isDefaultSelected | 单选时是否默认选中第一项（多选默认不选中） | Boolean | false    |
 
 ### Event
 

src/packages/tabselect/tabselect.vue

@@ -20,6 +20,7 @@
             positionNav="left"
             class="nut-tab-inner"
             :init-data="value.children"
+            :defIndex="defIndex"
           >
             <nut-tab-panel
               v-for="(item, index) in value.children"
@@ -99,6 +100,10 @@ export default {
     max: {
       type: Number,
       default: Infinity
+    },
+    isDefaultSelected: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -106,9 +111,10 @@ export default {
       isShow: false,
       level0: 0,
       level1: new Set([0]),
-      level2: new Set(["0-0"]),
-      allChoose: new Set([this.getText(0, 0, 0)]),
-      list: []
+      level2: this.isDefaultSelected ? new Set(["0-0"]) : new Set(),
+      allChoose: this.getText(0, 0, this.isDefaultSelected ? 0 : null),
+      list: [],
+      defIndex: 0
     };
   },
   components: {
@@ -124,18 +130,21 @@ export default {
         this.$emit("close");
       }
     },
-    tabList(val) {
-      this.list = val;
-      this.level0 = 0;
-      this.level1 = new Set([0]);
-      this.level2 = new Set(["0-0"]);
-      this.allChoose = new Set([this.getText(0, 0, 0)]);
-      this.emit();
+    tabList: {
+      handler(val) {
+        this.list = val;
+        this.level0 = 0;
+        this.level1 = new Set([0]);
+        this.level2 = this.isDefaultSelected ? new Set(["0-0"]) : new Set();
+        this.allChoose = this.getText(0, 0, this.isDefaultSelected ? 0 : null);
+        this.emit();
+      },
+      deep: true
     }
   },
   mounted() {
     this.list = this.tabList;
-    this.allChoose = new Set([this.getText(0, 0, 0)]);
+    this.allChoose = this.getText(0, 0, this.isDefaultSelected ? 0 : null);
     this.emit();
   },
   methods: {
@@ -146,28 +155,34 @@ export default {
           this.list[this.level0] &&
           this.list[this.level0].tabTitle) ||
           "",
-        [...this.allChoose]
+        (this.allChoose && [...this.allChoose]) || []
       );
     },
     getText(idx, index, sIndex) {
+      if (sIndex === null) {
+        return null;
+      }
       const tab =
         (this.list && this.list[idx] && this.list[idx].children[index]) || {};
       const subTit = tab.tabTitle;
       const content =
         (tab.content && tab.content[sIndex]) || this.defaultContent[sIndex];
-      return subTit + " " + content;
+      return new Set([{ subTit, content }]);
     },
     tabSwitchOuter: function(index, event) {
-      this.list.map(item => {
-        item.children = item.children.concat();
-      });
+      this.defIndex = 0;
       this.level0 = index;
       this.level1 = new Set([0]);
-      this.level2 = new Set(["0-0"]);
-      this.allChoose = new Set([this.getText(index, 0, 0)]);
+      this.level2 = this.isDefaultSelected ? new Set(["0-0"]) : new Set();
+      this.allChoose = this.getText(
+        index,
+        0,
+        this.isDefaultSelected ? 0 : null
+      );
       this.emit();
     },
     tabSwitchInner: function(index, event) {
+      this.defIndex = index;
       if (!this.multiple) {
         this.level1 = new Set([index]);
       } else {
@@ -187,13 +202,17 @@ export default {
       }
       if (!this.multiple) {
         this.level2 = new Set([index + "-" + sIndex]);
-        this.allChoose = new Set([this.getText(idx, index, sIndex)]);
+        this.allChoose = this.getText(idx, index, sIndex);
       } else {
         if (this.max !== Infinity && this.max === this.level2.size) {
           return;
         }
         this.level2 = new Set([...this.level2.add(index + "-" + sIndex)]);
-        this.allChoose.add(this.getText(idx, index, sIndex));
+        if (this.allChoose) {
+          this.allChoose.add(...this.getText(idx, index, sIndex));
+        } else {
+          this.allChoose = this.getText(idx, index, sIndex);
+        }
       }
       this.emit();
     },