Vue.js的完全可访问的，易于样式设置的自定义选择组件。

键盘交互：

• Down Arrow –将焦点和选择移至下一个选项。
• Up Arrow –将焦点和选择移至上一个选项。
• Home –将焦点和选择移到第一个选项。
• End –将焦点和选择移到最后一个选项。

安装和下载：

# Yarn
$ yarn add vue-accessible-select

# NPM
$ npm install vue-accessible-select --save

使用：

1.安装并导入模块。

import Vue from "vue";
import { VueAccessibleSelect } from "vue-accessible-select";

2.将可访问的选择组件插入模板。

<vue-accessible-select
  v-model="value"
  :options="options"
  :disabled="disabled"
  label="Select"
  placeholder="Select"
>
  <template v-slot:prepend>
    <svg viewBox="0 0 54 54">
      <path d="M27 1l8 17 19 3-14 13 4 19-17-9-17 9 3-19L0 21l19-3z"></path>
    </svg>
  </template>
  <template v-slot:label>
    <strong>? Just a label slot:</strong>
  </template>
  <template v-slot:placeholder>? I am a placeholder slot</template>
  <template v-slot:selected="{ value, option }">? Woooow, {{ option.label }}</template>
  <template v-slot:option="{ option }">{{ option.label }}.</template>
</vue-accessible-select>
<output>
  <span class="tag" style="margin-right: 4px;">Value:</span> <code>{{ value }}</code>
</output>

3.注册组件并定义您自己的选项。

export default {
  name: "App",
  components: {
    VueAccessibleSelect
  },
  data() {
    return {
      value: undefined,
      options: [
        {
          value: 0,
          label: "? Grape"
        },
        {
          value: { foo: "bar" },
          label: "? Watermelon"
        },
        {
          value: { foo: "bar" },
          label: "? Kiwi"
        },
        {
          value: false,
          label: "? Mango"
        },
        {
          value: true,
          label: "? Strawberry"
        },
        {
          value: "lemon",
          label: "? Lemon"
        },
        {
          value: "melon",
          label: "? Melon"
        },
        {
          value: "foo",
          label: "Lorem ipsum dolor sit amet"
        }
      ],
      disabled: false
    };
  }
};

4.所有默认props。

options: {
  type: Array,
  required: true,
},
value: {
  required: true,
},
transition: {
  type: Object,
  default: () => config.transition || {},
},
label: String,
placeholder: String,
disabled: Boolean

---

官网：https://github.com/andrewvasilchuk/vue-accessible-select

演示：https://www.vue365.cn/code_demo.php?id=163

GitHub下载：https://github.com/andrewvasilchuk/vue-accessible-select/archive/master.zip