Merge pull request #603 from DaoCloud/docs/select

docs(select): add the document and demo of the select component

examples/view/demos/select/demo-1.vue

@@ -0,0 +1,31 @@
+<template>
+  <dao-select
+    v-model="select"
+    placeholder="一个简单下拉框">
+    <dao-option
+      v-for="item in items"
+      :key="item.value"
+      :value="item.value"
+      :label="item.text">
+    </dao-option>
+  </dao-select>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        select: 1,
+        items: [{
+          text: '选项一',
+          value: 1,
+        }, {
+          text: '选项二',
+          value: 2,
+        }, {
+          text: '选项三',
+          value: 3,
+        }]
+      };
+    },
+  };
+</script>

examples/view/demos/select/demo-2.vue

@@ -0,0 +1,32 @@
+<template>
+  <dao-select
+    v-model="select"
+    placeholder="一个小号下拉框"
+    size="sm">
+    <dao-option
+      v-for="item in items"
+      :key="item.value"
+      :value="item.value"
+      :label="item.text">
+    </dao-option>
+  </dao-select>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        select: 1,
+        items: [{
+          text: '选项一',
+          value: 1,
+        }, {
+          text: '选项二',
+          value: 2,
+        }, {
+          text: '选项三',
+          value: 3,
+        }]
+      };
+    },
+  };
+</script>

examples/view/demos/select/demo-3.vue

@@ -0,0 +1,35 @@
+<template>
+  <dao-select
+    v-model="select"
+    placeholder="一个带搜索下拉框"
+    :with-search="true"
+    search-placeholder="搜索条件在这里">
+    <dao-option-group>
+      <dao-option
+        v-for="item in items"
+        :key="item.value"
+        :value="item.value"
+        :label="item.text">
+      </dao-option>
+    </dao-option-group>
+  </dao-select>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        select: 1,
+        items: [{
+          text: '苹果',
+          value: '苹果',
+        }, {
+          text: '香蕉',
+          value: '香蕉',
+        }, {
+          text: '梨',
+          value: '梨',
+        }]
+      };
+    },
+  };
+</script>

examples/view/demos/select/demo-4.vue

@@ -0,0 +1,27 @@
+<template>
+  <dao-select
+    v-model="button"
+    placeholder="带按钮选择器"
+    btn-content="😆你好"
+    :with-btn="true"
+    @btn-event="buttonEvent">
+    <dao-option-group>
+      <dao-option :value="1" label="Hello"></dao-option>
+      <dao-option :value="2" label="Aloha"></dao-option>
+    </dao-option-group>
+  </dao-select>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        button: null,
+      };
+    },
+    methods: {
+      buttonEvent(value) {
+        alert(`The selected value is: ${value}`);
+      },
+    },
+  };
+</script>

examples/view/demos/select/demo-5.vue

@@ -0,0 +1,28 @@
+<template>
+  <dao-select
+    v-model="tab"
+    placeholder="带标签选择器"
+    :with-tab="true">
+    <dao-tab direction="left">
+      <dao-tab-item heading="标题1">
+        <dao-option-group label="111">
+          <dao-option :value="1" prefix="标题1：">111_1</dao-option>
+          <dao-option :value="2" prefix="标题1：">111_2</dao-option>
+          <dao-option :value="3" prefix="标题1：">111_3</dao-option>
+        </dao-option-group>
+      </dao-tab-item>
+      <dao-tab-item heading="标题2">
+        <dao-option-group label="222"></dao-option-group>
+      </dao-tab-item>
+    </dao-tab>
+  </dao-select>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tab: null,
+      };
+    },
+  };
+</script>

examples/view/demos/select/demo-6.vue

@@ -0,0 +1,10 @@
+<template>
+  <dao-select
+    :value="1"
+    placeholder="禁用的选择器"
+    :disabled="true">
+    <dao-option-group>
+      <dao-option :value="1" label="Hello"></dao-option>
+    </dao-option-group>
+  </dao-select>
+</template>

examples/view/demos/select/demo-7.vue

@@ -0,0 +1,21 @@
+<template>
+  <dao-select
+    value=""
+    placeholder="加载中的选择器"
+    loading-text="加载中的选择器"
+    :loading="loadingState">
+    <dao-option-group>
+      <dao-option :value="1" label="Hello"></dao-option>
+    </dao-option-group>
+  </dao-select>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        loadingState: true,
+      };
+    },
+  }
+</script>
+

examples/view/demos/select/demo-8.vue

@@ -0,0 +1,51 @@
+<template>
+  <dao-select
+    v-model="asynchronous"
+    placeholder="异步获取数据选择器"
+    :async="asyncFunc">
+    <dao-option
+      v-for="option in options"
+      :key="option.value"
+      :value="option.value"
+      :label="option.text">
+      {{ option.text }}
+    </dao-option>    
+  </dao-select>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        options: [],
+        asynchronous: null,
+      };
+    },
+    methods: {
+      asyncFunc() {
+        const options = [{
+          value: 1,
+          text: '选项一',
+        }, {
+          value: 2,
+          text: '选项二',
+        }, {
+          value: 3,
+          text: '选项三',
+        }];
+        const p = new Promise((res, rej) => {
+          if (true) {
+            setTimeout(() => {
+              res(options);
+            }, 2000);
+          } else {
+            rej(0);
+          }
+        });
+        return p.then((res) => {
+          this.options = res;
+        });
+      }
+    },
+  }
+</script>
+

examples/view/demos/select/demo-9.vue

@@ -0,0 +1,60 @@
+<template>
+  <dao-select 
+    v-model="asyncSearch" 
+    placeholder="带异步搜索选择器" 
+    search-placeholder="搜索条件在这里" 
+    no-match-text="无匹配选项"
+    :with-search="true" 
+    :async-search="true"
+    :async="asyncFun">
+    <dao-option-group>
+      <dao-option 
+        v-for="item in asyncSearchItems" 
+        :value="item"
+        :key="item.value"
+        :label="item.text">
+      </dao-option>
+    </dao-option-group>
+  </dao-select>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        asyncSearch: null,
+        asyncSearchItems: [{
+          value: 1,
+          text: '选项一',
+        }, {
+          value: 2,
+          text: '选项二',
+        }, {
+          value: 3,
+          text: '选项三',
+        }],
+      };
+    },
+    methods: {
+      asyncFun(val) {
+        console.log('asyncFun: ', val);
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            const num = parseInt((Math.random() * 100).toFixed(0), 10);
+            const result = [];
+            /* eslint-disable */
+            for (let i = 0; i < num; i++) {
+              const ran = (Math.random() * 10).toFixed(0);
+              const item = {
+                value: `value-${i + 1}-${ran}`,
+                text: `text-${i + 1}-${ran}`,
+              };
+              result.push(item);
+            }
+            this.asyncSearchItems = result;
+            resolve();
+          }, 2000);
+        });
+      },
+    }
+  }
+</script>