插件名称 | vue-accessible-select |
---|---|
发布时间 | 2020年4月10日 |
插件作者 | andrewvasilchuk |
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