Browse Source

doc:picker 自定义数据demo修改

richard1015 6 years ago
parent
commit
4a7229e67b
3 changed files with 154 additions and 3 deletions
  1. 1 1
      sites/doc/compents/hidden/hidden.vue
  2. 80 1
      src/packages/picker/demo.vue
  3. 73 1
      src/packages/picker/doc.md

+ 1 - 1
sites/doc/compents/hidden/hidden.vue

@@ -88,7 +88,7 @@ export default {
 }
 .hide{    
     position: relative;
-    max-height: 2000px;
+    max-height: 4000px;
 }
 .bar{
     height: 30px;

+ 80 - 1
src/packages/picker/demo.vue

@@ -33,6 +33,15 @@
           <span class="show-value">{{year ? year : '请选择'}}</span>
         </div>
       </nut-cell>
+      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible2')">
+        <span slot="title">
+          <label>城市选择自定义数据</label>
+        </span>
+        <span slot="sub-title">联动~~~</span>
+        <div slot="desc" class="selected-option">
+          <span class="show-value">{{cityCustmer ? cityCustmer : '请选择'}}</span>
+        </div>
+      </nut-cell>
     </div>
     <!-- demo 年月选择(不联动)-->
     <nut-picker
@@ -62,10 +71,49 @@
       @close="switchPicker('isVisible1')"
       @confirm="setYearValue"
     ></nut-picker>
+    <!-- demo 城市选择(联动) 自定义-->
+    <nut-picker
+      :is-visible="isVisible2"
+      title="请选择城市"
+      :default-value-data="defaultValueData"
+      :list-data="custmerCityData"
+      @close="switchPicker('isVisible2')"
+      @confirm="setChooseValueCustmer"
+      @choose="updateChooseValueCustmer"
+      @close-update="closeUpdateChooseValueCustmer"
+    ></nut-picker>
   </div>
 </template>
 
 <script>
+const APIData = [
+  {
+    label: 1,
+    array: [
+      {
+        label: 3,
+        value: "朝阳区"
+      },
+      {
+        label: 4,
+        value: "海淀区"
+      }
+    ]
+  },
+  {
+    label: 2,
+    array: [
+      {
+        label: 5,
+        value: "测试1"
+      },
+      {
+        label: 6,
+        value: "测试2"
+      }
+    ]
+  }
+];
 export default {
   data() {
     return {
@@ -102,7 +150,7 @@ export default {
           "2036",
           "2037",
           "2038",
-          "2039",
+          "2039"
         ],
         ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
       ],
@@ -150,6 +198,20 @@ export default {
       listData1: [
         ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"]
       ],
+      custmerCityData: [
+        [
+          {
+            label: 1,
+            value: "北京"
+          },
+          {
+            label: 2,
+            value: "上海"
+          }
+        ]
+      ],
+      cityCustmer: null,
+      isVisible2: false,
       defaultValueData1: null
     };
   },
@@ -213,6 +275,23 @@ export default {
       this.updateLinkage(self, chooseData[0], 1, chooseData[1], chooseData);
     },
 
+    setChooseValueCustmer(chooseData) {
+      var str = chooseData.map(item => item.value).join("-");
+      this.cityCustmer = str;
+    },
+    closeUpdateChooseValueCustmer(self, chooseData) {
+      this.setChooseValueCustmer(chooseData);
+    },
+    updateChooseValueCustmer(self, index, resValue, cacheValueData) {
+      let { label, value } = resValue;
+      //此处模拟查询API
+      setTimeout(() => {
+        var resItems = APIData.find(item => item.label == label);
+        if (resItems && resItems.array.length) {
+          this.$set(this.custmerCityData, index + 1, resItems.array);
+        }
+      }, 100);
+    },
     modifyCity() {
       this.updateLinkage("", "重庆", 1, "重庆");
       this.defaultValueData = ["重庆", "重庆"];

+ 73 - 1
src/packages/picker/doc.md

@@ -44,7 +44,50 @@
 </nut-picker>
 ```
 
+## 联动(省市区)自定义数据
+
+```html
+<nut-picker
+    :is-visible="isVisible2"
+    title="请选择城市"
+    :default-value-data="defaultValueData"
+    :list-data="custmerCityData"
+    @close="switchPicker('isVisible2')"
+    @confirm="setChooseValueCustmer"
+    @choose="updateChooseValueCustmer"
+    @close-update="closeUpdateChooseValueCustmer"
+></nut-picker>
+```
+
 ```javascript
+const APIData = [
+  {
+    label: 1,
+    array: [
+      {
+        label: 3,
+        value: "朝阳区"
+      },
+      {
+        label: 4,
+        value: "海淀区"
+      }
+    ]
+  },
+  {
+    label: 2,
+    array: [
+      {
+        label: 5,
+        value: "测试1"
+      },
+      {
+        label: 6,
+        value: "测试2"
+      }
+    ]
+  }
+];
 export default {
     data() {
         return {
@@ -79,7 +122,20 @@ export default {
             year: null,
             isVisible1: false,
             listData1: [['2010', '2011', '2012', '2013', '2014', '2015', '2016','2017', '2018' ]],
+            custmerCityData: [
+                [{
+                    label: 1,
+                    value: "北京"
+                },
+                {
+                    label: 2,
+                    value: "上海"
+                }]
+            ],
+            cityCustmer: null,
+            isVisible2: false,
             defaultValueData1: null
+            };
         };
     },
     created() {
@@ -130,7 +186,23 @@ export default {
         closeUpdateChooseValue(self, chooseData) {
             this.updateLinkage(self, chooseData[0], 1, chooseData[1], chooseData);
         },
-
+        setChooseValueCustmer(chooseData) {
+            var str = chooseData.map(item => item.value).join("-");
+            this.cityCustmer = str;
+        },
+        closeUpdateChooseValueCustmer(self, chooseData) {
+            this.setChooseValueCustmer(chooseData);
+        },
+        updateChooseValueCustmer(self, index, resValue, cacheValueData) {
+            let { label, value } = resValue;
+            //此处模拟查询API
+            setTimeout(() => {
+                var resItems = APIData.find(item => item.label == label);
+                if (resItems && resItems.array.length) {
+                this.$set(this.custmerCityData, index + 1, resItems.array);
+                }
+            }, 100);
+        },
         modifyCity() {
             this.updateLinkage('', '重庆', 1, '重庆');
             this.defaultValueData = ['重庆', '重庆'];