axure下拉列表框单选_具有自动完成功能的单选下拉列表

最新推荐文章于 2023-11-15 16:04:55 发布

cuk5340

最新推荐文章于 2023-11-15 16:04:55 发布

阅读量643

点赞数

文章标签： vue java python javascript js ViewUI

原文链接：https://vuejsexamples.com/single-select-dropdown-with-autocomplete/

版权

axure下拉列表框单选

Vue-单选 (vue-single-select)

simple autocomplete select dropdown component for Vue apps for you!

适用于Vue应用程序的简单自动完成选择下拉组件！

View demo 查看演示 Download Source 下载源

它能做什么 (What It Does)

vue-single-select provides a simple interface to replace regular select elements with an auto-complete select element like Chosen for jQuery.

vue-single-select提供了一个简单的界面，可将常规选择元素替换为自动完成的选择元素，例如jQuery的Chosen。

它不做什么 (What It Does Not Do)

Nope no Multi Select. See vue-multiple-select for this.

不，不，多选。有关详细信息，请参见vue-multiple-select。

No ajax loading.

没有ajax加载。

No massive styling options (for now).

没有大量的样式选择(目前)。

用法 (Usage)

安装它 (Install it)

$ npm i vue-single-select

注册 (Register it)

In your component:

在您的组件中：

import VueSingleSelect from "vue-single-select";
export default {
components: {
     VueSingleSelect
  },
  //...
}

Globally:

全球范围内：

import VueSingleSelect from "vue-single-select";
Vue.component('vue-single-select', VueSingleSelect);

用它 (Use It)

<vue-single-select
        v-model="fruit"
        :options="['apple','banana','cherry','tomato']"
        :required="true"
></vue-single-select>

再次使用 (Use It Again)

<vue-single-select
        name="maybe"
        placeholder="pick a post"
        you-want-to-select-a-post="ok"
        v-model="post"
        out-of-all-these-posts="makes sense"
        :options="posts"
        a-post-has-an-id="good for search and display"
        option-key="id"
        the-post-has-a-title="make sure to show these"
        option-label="title"
></vue-single-select>

再次使用 (Use It Again)

<vue-single-select
        you-want-to-select-a-reply="yes"
        v-model="reply"
        out-of-all-these-replies="yep"
        :options="replies"
        a-reply-only-has-a-reply="sounds about right"
        option-label="reply"
        seed-an-initial-value="what's seed mean?"
        initial="seed me"
        you-only-want-20-options-to-show="is 20 enough?"
        :max-results="20"
></vue-single-select>

不喜欢造型 (Dont like the Styling)

You can override some of it. Like so:

您可以覆盖其中的一些。像这样：

<vue-single-select
        id="selected-reply"
        name="a_reply"
        option-label="reply"
        v-model="reply"
        :options="replies"
        you-like-huge-dropdowns="1000px is long!"
        max-height="1000px"
        you-love-bootstrap="yes!!"
        :classes="{
                    input: 'form-control',
                    wrapper: 'form-group',
                    icons: 'glyphicon',
                    required: 'required'
        }"
></vue-single-select>

Then all you need to do is provide some class definitions like so:

然后，您需要做的就是提供一些类定义，如下所示：

.form-control {
    color: pink;
    width: 10000px;
    _go: nuts;
}
.glyphicon {
    display:none;
}
.form-group {
    background-color: pink;
    font-size: 16px;
}

.required {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

Note: Bootstrap 3 Users May want to increase the size of the icons.

注意：Bootstrap 3用户可能想要增加图标的大小。

If so do this:

如果是这样，请执行以下操作：

.icons svg {
    height: 1em;
    width: 1em;
}

厨房水槽 (Kitchen Sink)

Meh, see props below.

嗯，请参阅下面的道具。

为什么VUE单选更好 (Why vue-single-select is better)

It handles custom label/value props for displaying options.

它处理用于显示选项的自定义标签/值道具。

Other select components require you to conform to their format. Which often means data wrangling.

其他精选组件要求您遵循其格式。这通常意味着数据争吵。
It's easier on the DOM.

在DOM上更容易。

Other components will load up all the options available in the select element. This can be heavy. vue-single-select makes an executive decision that you probably will not want to scroll more than N options before you want to narrow things down a bit. You can change this, but the default is 30.

其他组件将加载select元素中所有可用的选项。这可能很重。 vue-single-select做出了一项行政决策，即在您想缩小范围之前，您可能不想滚动超过N个选项。您可以更改它，但默认值为30。
Snappy Event Handling

快照事件处理
- up and down arrows for selecting options
  向上和向下箭头，用于选择选项
- enter to select first match
  输入以选择第一个比赛
- remembers selection on change
  记得改变时的选择
- hit the escape key to, well, escape
  按下逃逸键，以逃生
Lightweight

轻巧的
- Why are the other packages so big and actually have dependencies?
  为什么其他软件包如此之大并实际上具有依赖性？
It works for regular 'POST backs' to the server.

它适用于服务器的常规“回发”。

If you are doing a regular post or just gathering the form data you don't need to do anything extra to provide a name and value for the selected option.

如果您要进行常规发布或仅收集表单数据，则无需执行任何其他操作即可为所选选项提供名称和值。
Mine just looks nicer

我的看起来更好
It's simple!!

这很简单！！

可用道具： (Available Props:)

There are more props than I'd like. But I needed them so you might too.

道具比我想要的还要多。但是我需要它们，所以您也可能需要。

props: {
    value: {
      required: true
    },
    // Give your element a name.
    // Good for doing a POST
    name: {
      type: String,
      required: false,
      default: () => ""
    },
    // Your list of things for the select
    options: {
      type: Array,
      required: false,
      default: () => []
    },
    // Tells vue-single-select what key to use
    // for generating option labels
    optionLabel: {
      type: String,
      required: false,
      default: () => null
    },
    // Tells vue-single-select the value
    // you want populated in the select for the 
    // input
    optionKey: {
      type: String,
      required: false,
      default: () => null
    },
    placeholder: {
      type: String,
      required: false,
      default: () => "Search Here"
    },
    maxHeight: {
      type: String,
      default: () => "220px",
      required: false
    },
    //Give your input an html element id
    inputId: {
      type: String,
      default: () => "single-select",
      required: false
    },
    //Customize the styling by providing 
    //these FOUR custom style definitions.
    classes: {
      type: Object,
      required: false,
      default: () => {
        return {
          wrapper: "single-select-wrapper",
          input: "search-input",
          icons: "icons",
          required: "required"
        };
      }
    },
    // Seed search text with initial value
    initial: {
      type: String,
      required: false,
      default: () => null
    },
    required: {
      type: Boolean,
      required: false,
      default: () => false
    },
    maxResults: {
      type: Number,
      required: false,
      default: () => 30
    },
    tabindex: {
      type: String,
      required: false,
      default: () => {
        return "";
      }
    },
    // Tell vue-single-select what to display
    // as the selected option
    getOptionDescription: {
      type: Function,
      default(option) {
        if (this.optionKey && this.optionLabel) {
          return option[this.optionKey] + " " + option[this.optionLabel];
        }
        if (this.optionLabel) {
          return option[this.optionLabel];
        }
        if (this.optionKey) {
          return option[this.optionKey];
        }
            return option;
      }
    },
    // Use this to actually give vue-single-select
    // a value for doing a POST
    getOptionValue: {
      type: Function,
      default(option) {
        if (this.optionKey) {
          return option[this.optionKey];
        }
        
        if (this.optionLabel) {
          return option[this.optionLabel];
        }

        return option;
      }
    }
  }

问答环节 (Q&A)

Q. What about Ajax?

问：Ajax呢？

A. Good question. Why aren't you passing that in as a prop? Seriously, this is just a widget why does it need knowledge of it's data source?

答：好问题。您为什么不将其作为道具传递呢？说真的，这只是一个小部件，为什么它需要了解其数据源？

Q. What about Templating?

问： 关于模板呢？

A. Good question. Really. Working on it.

答：好问题。真。正在努力。

Q. What about Multiple Selects?

问：多重选择怎么样？

A. Nope not found here.

答：没有在这里找不到。

Q. Why doesn't it work?

问： 为什么不起作用？

A. You know I really didn't make this to be used without a bundler and the vue-loader. If you don't know what this means then checkout Parcel or Vue Cli to get started. You're going to want it anyway.

答：您知道我真的没有在没有捆绑器和vue-loader的情况下使用它。如果您不知道这意味着什么，请签出Parcel或Vue Cli以开始使用。无论如何，您都会想要它。

Or if you are ready to roll but need a helping hand use Laravel Mix It's your one stop to success!

或者，如果您准备滚动但需要帮助，请使用Laravel Mix，这是您成功的一站式服务！