<template>
  <div class="demo-select-basic">
    <div class="demo-box">
      <ui-select
        v-model="value"
        :options="options"
        show-arrow
        clearable
        borderless
        filterable></ui-select>
    </div>

    <div class="demo-box">
      <ui-select
        v-model="value"
        :options="options"
        show-arrow
        clearable
        filterable></ui-select>
    </div>

    <div class="demo-box">
      <ui-select
        v-model="value"
        :options="options"
        show-arrow
        clearable
        filterable
        :filter-method="filterMethod"></ui-select>
    </div>

    <div class="demo-box">
      <ui-select
        v-model="value"
        :options="options"
        disabled
        borderless></ui-select>
    </div>
  </div>
</template>

<script>
import { Select } from "amumu-ui"
export default {
  components: {
    "ui-select": Select,
  },
  data() {
    return {
      value: "1",
      options: [],
    }
  },
  mounted() {
    setTimeout(() => {
      this.options = [
        { label: "请选择", value: "" },
        { label: "选项1选项1选项1选项1选项1选项11", value: "1" },
        { label: "选项2", value: "2" },
        { label: "选项3", value: "3" },
        { label: "选项4", value: "4", disabled: true },
        { label: "Apple", value: "5" },
        { label: "apple", value: "5" },
      ]
    }, 2000)
  },
  methods: {
    filterMethod({ label }, inputValue) {
      return label.indexOf(String(inputValue)) !== -1
    },
  },
}
</script>
