@opentiny/vue-docs 2.2.18 → 2.2.20

package/demos/mobile/app/multi-select/event-click-item.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="demo-multi-select">
     <tiny-multi-select :data-source="data" v-model="value" @item-click="handleItemClick"> </tiny-multi-select>
+
+    <p>value: {{ value }}</p>
   </div>
 </template>
 
@@ -23,97 +25,90 @@ export default {
               value: '2020年',
               children: [
                 {
-                  label: '2020全年',
+                  label: '全年',
                   children: [],
-                  value: '2020全年'
+                  value: '全年'
                 },
                 {
-                  label: '2020年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2020年Q1一月',
-                      value: '2020年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2020年Q1二月',
-                      value: '2020年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2020年Q1三月',
-                      value: '2020年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2020年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2020年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2020年Q2四月',
-                      value: '2020年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2020年Q2五月',
-                      value: '2020年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2020年Q2六月',
-                      value: '2020年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2020年Q2'
+                  value: 'Q2'
                 }
-              ],
-              value: '2020年'
+              ]
             },
             {
               label: '2021年',
               children: [
                 {
-                  label: '2021全年',
-                  children: [
-                    {
-                      label: '年',
-                      value: '年'
-                    }
-                  ],
-                  value: '2021全年'
+                  label: '全年',
+                  value: '全年'
                 },
                 {
-                  label: '2021年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2021年Q1一月',
-                      value: '2021年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2021年Q1二月',
-                      value: '2021年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2021年Q1三月',
-                      value: '2021年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2021年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2021年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2021年Q2四月',
-                      value: '2021年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2021年Q2五月',
-                      value: '2021年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2021年Q2六月',
-                      value: '2021年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2021年Q2'
+                  value: 'Q2'
                 }
               ],
               value: '2021年'
@@ -122,50 +117,44 @@ export default {
               label: '2022年',
               children: [
                 {
-                  label: '2022全年',
-                  children: [
-                    {
-                      label: '年',
-                      value: '年'
-                    }
-                  ],
-                  value: '2022全年'
+                  label: '全年',
+                  value: '全年'
                 },
                 {
-                  label: '2022年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2022年Q1一月',
-                      value: '2022年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2022年Q1二月',
-                      value: '2022年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2022年Q1三月',
-                      value: '2022年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2022年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2022年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2022年Q2四月',
-                      value: '2022年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2022年Q2五月',
-                      value: '2022年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2022年Q2六月',
-                      value: '2022年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2022年Q2'
+                  value: 'Q2'
                 }
               ],
               value: '2022年'
@@ -174,7 +163,6 @@ export default {
         },
         {
           title: '区域',
-          multiple: true,
           options: [
             {
               label: '海外',
@@ -243,9 +231,10 @@ export default {
     }
   },
   methods: {
-    handleItemClick(data) {
+    handleItemClick(item, headerIndex) {
+      const text = `${this.data[headerIndex].title}: ${item.label}`
       Toast.service({
-        text: data.label
+        text
       })
     }
   }
@@ -256,8 +245,4 @@ export default {
 .demo-multi-select {
   height: 100%;
 }
-
-p {
-  margin-top: 300px;
-}
 </style>

package/demos/mobile/app/multi-select/filter.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="demo-multi-select">
-    <tiny-multi-select :data-source="data" filterable v-model="value" v-model:searchValue="searchValue">
+    <tiny-multi-select
+      :data-source="data"
+      filterable
+      v-model="value"
+      v-model:searchValue="searchValue"
+      :search-placeholder="searchPlaceholder"
+    >
     </tiny-multi-select>
   </div>
 </template>
@@ -15,6 +21,7 @@ export default {
   data() {
     return {
       value: ['', '', ''],
+      searchValue: '',
       data: [
         {
           title: '时间',
@@ -24,97 +31,90 @@ export default {
               value: '2020年',
               children: [
                 {
-                  label: '2020全年',
+                  label: '全年',
                   children: [],
-                  value: '2020全年'
+                  value: '全年'
                 },
                 {
-                  label: '2020年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2020年Q1一月',
-                      value: '2020年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2020年Q1二月',
-                      value: '2020年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2020年Q1三月',
-                      value: '2020年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2020年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2020年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2020年Q2四月',
-                      value: '2020年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2020年Q2五月',
-                      value: '2020年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2020年Q2六月',
-                      value: '2020年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2020年Q2'
+                  value: 'Q2'
                 }
-              ],
-              value: '2020年'
+              ]
             },
             {
               label: '2021年',
               children: [
                 {
-                  label: '2021全年',
-                  children: [
-                    {
-                      label: '年',
-                      value: '年'
-                    }
-                  ],
-                  value: '2021全年'
+                  label: '全年',
+                  value: '全年'
                 },
                 {
-                  label: '2021年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2021年Q1一月',
-                      value: '2021年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2021年Q1二月',
-                      value: '2021年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2021年Q1三月',
-                      value: '2021年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2021年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2021年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2021年Q2四月',
-                      value: '2021年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2021年Q2五月',
-                      value: '2021年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2021年Q2六月',
-                      value: '2021年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2021年Q2'
+                  value: 'Q2'
                 }
               ],
               value: '2021年'
@@ -123,50 +123,44 @@ export default {
               label: '2022年',
               children: [
                 {
-                  label: '2022全年',
-                  children: [
-                    {
-                      label: '年',
-                      value: '年'
-                    }
-                  ],
-                  value: '2022全年'
+                  label: '全年',
+                  value: '全年'
                 },
                 {
-                  label: '2022年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2022年Q1一月',
-                      value: '2022年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2022年Q1二月',
-                      value: '2022年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2022年Q1三月',
-                      value: '2022年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2022年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2022年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2022年Q2四月',
-                      value: '2022年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2022年Q2五月',
-                      value: '2022年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2022年Q2六月',
-                      value: '2022年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2022年Q2'
+                  value: 'Q2'
                 }
               ],
               value: '2022年'
@@ -175,7 +169,6 @@ export default {
         },
         {
           title: '区域',
-          multiple: true,
           options: [
             {
               label: '海外',
@@ -240,7 +233,8 @@ export default {
             }
           ]
         }
-      ]
+      ],
+      searchPlaceholder: '自定义提示'
     }
   }
 }
@@ -250,26 +244,4 @@ export default {
 .demo-multi-select {
   height: 100%;
 }
-
-.page__hd {
-  padding: 40px;
-}
-
-.page__title {
-  font-weight: 400;
-  font-size: 21px;
-  text-align: left;
-}
-
-.page__desc {
-  margin-top: 5px;
-  color: #888;
-  font-size: 14px;
-  text-align: left;
-}
-
-.page__content {
-  width: 100%;
-  background-color: #fff;
-}
 </style>

package/demos/mobile/app/multi-select/mask.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="demo-multi-select">
+    <tiny-multi-select :data-source="data" v-model="value" mask> </tiny-multi-select>
+
+    <p>value: {{ value }}</p>
+  </div>
+</template>
+
+<script>
+import { MultiSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyMultiSelect: MultiSelect
+  },
+  data() {
+    return {
+      value: ['公有云'],
+      maskOptions: {
+        'z-index': 100,
+        'cancel-touch': true
+      },
+      data: [
+        {
+          title: '云类型',
+          options: [
+            {
+              label: '公有云',
+              value: '公有云'
+            },
+            {
+              label: '私有云',
+              value: '私有云'
+            },
+            {
+              label: '伙伴云',
+              value: '伙伴云'
+            },
+            {
+              label: '公有云1',
+              value: '公有云1'
+            },
+            {
+              label: '公有云2',
+              value: '公有云2'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-multi-select {
+  position: relative;
+  height: 100%;
+}
+</style>

package/demos/mobile/app/multi-select/slots.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="demo-multi-select">
+    <tiny-multi-select :data-source="data" v-model="value">
+      <template #footer>
+        <div class="my-footer">
+          <p>自定义底部插槽</p>
+        </div>
+      </template>
+    </tiny-multi-select>
+    <p>value: {{ value }}</p>
+  </div>
+</template>
+
+<script>
+import { MultiSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyMultiSelect: MultiSelect
+  },
+  data() {
+    return {
+      data: [
+        {
+          title: '云类型',
+          options: [
+            {
+              label: '公有云',
+              value: '公有云'
+            },
+            {
+              label: '私有云',
+              value: '私有云'
+            },
+            {
+              label: '伙伴云',
+              value: '伙伴云'
+            },
+            {
+              label: '公有云1',
+              value: '公有云1'
+            },
+            {
+              label: '公有云2',
+              value: '公有云2'
+            }
+          ]
+        }
+      ],
+      value: []
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-multi-select {
+  position: relative;
+  height: 100%;
+  background-color: #f5f5f5;
+}
+
+.my-footer {
+  text-align: center;
+}
+</style>