ソースを参照

feat: 添加确定按钮回调

yige 5 年 前
コミット
35312dee18

+ 5 - 0
src/packages/tabselect/demo.vue

@@ -15,6 +15,7 @@
       :show="show"
       @close="show = false"
       @choose="choose"
+      @onOkBtn="onOkBtn"
       :multiple="false"
       :isDefaultSelected="true"
     ></nut-tabselect>
@@ -34,6 +35,7 @@
       :show="showMore"
       @close="showMore = false"
       @choose="choose"
+      @onOkBtn="onOkBtn"
       :multiple="true"
       :max="3"
     ></nut-tabselect>
@@ -130,6 +132,9 @@ export default {
   methods: {
     choose(title, item) {
       console.log(title, item);
+    },
+    onOkBtn(event) {
+      console.log(event)
     }
   }
 };

+ 40 - 34
src/packages/tabselect/doc.md

@@ -11,6 +11,7 @@
   :show="show"
   @close="show = false"
   @choose="choose"
+  @onOkBtn="onOkBtn"
   :multiple="false"
   :isDefaultSelected="true"
 ></nut-tabselect>
@@ -27,6 +28,7 @@
   :show="show"
   @close="show = false"
   @choose="choose"
+  @onOkBtn="onOkBtn"
   :multiple="true"
   :max="3"
 ></nut-tabselect>
@@ -37,90 +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
-    };
+    }
   },
   methods: {
     choose(title, item) {
-      console.log(title, item);
+      console.log(title, item)
+    },
+    onOkBtn(event) {
+      console.log(event)
     }
   }
-};
+}
 ```
 
 ### Prop
@@ -141,4 +146,5 @@ export default {
 | 事件名称 | 说明                 | 回调参数                               |
 | -------- | -------------------- | -------------------------------------- |
 | choose   | 切换页签或选中某一项 | 点击的一级 tab ,二级 tab ,选中项内容 |
+| onOkBtn  | 确定按钮回调         | Event                                  |
 | close    | 组件隐藏时           | --                                     |

+ 8 - 1
src/packages/tabselect/tabselect.vue

@@ -60,7 +60,7 @@
         </nut-tab-panel>
       </nut-tab>
       <div class="nut-tabselect-btn">
-        <a href="javascript:;" @click="isShow = false">确定</a>
+        <a href="javascript:;" @click="clickHandler">确定</a>
       </div>
     </nut-popup>
   </div>
@@ -216,6 +216,13 @@ export default {
       }
       this.emit();
     },
+    clickHandler (event) {
+      this.$emit(
+        "onOkBtn",
+        event
+      )
+      this.isShow = false
+    },
     isActive(idx, index, sIndex) {
       if (
         idx === this.level0 &&