如何使自动建议字段看起来像引导输入？答案

【问题标题】：How to make autosuggest field look like bootstrap input?如何使自动建议字段看起来像引导输入？
【发布时间】：2020-08-25 22:44:48
【问题描述】：

如何使<vue-autosuggest> 输入看起来像来自 BootstrapVue (<b-input>) 的输入？

【问题讨论】：

如果你已经导入了bootstrap.css，可能你想试试<vue-autosuggest class="form-control" />。
@Sphinx 我试过了。看起来默认的 html 输入在引导程序的内部
不幸的是，至少从查看 vue-autosuggest 上的演示来看，该组件将输入包装在一个 div 中。我相信引导 CSS 会检查其附加的元素是否属于“输入”类型，所以这不起作用@Sphinx
看看我的回答@Fagam32 - 你需要修改 vue-autosuggest 包附带的组件以在输入中包含类
更新了我的答案以扩展您需要做什么以及为什么

标签： css vue.js

【解决方案1】：

要将form-control 类应用于vue-autosuggest 的内部<input>，根据引导程序<input> 样式的要求，您可以使用inputProps 属性（自动应用于<input>）：

<template>
  <vue-autosuggest :input-props="inputProps">
    ...
  </vue-autosuggest>
</template>

<script>
export default {
  data() {
    return {
      inputProps: {
        class: 'form-control',
      }
    }
  }
}
</script>

有趣的是，该类过去在 vue-autosuggest 1.x 中默认添加，但原来是 removed in 2.x。

demo

【讨论】：

【解决方案2】：

您需要修改vue-autosuggest 组件的<input> 标记以包含来自Vue-Bootstrap 的form-control 类。

您将无法将此类直接添加到组件中，因为组件将输入包装在 div 块中。 Bootstrap CSS 要求元素的类型为 input 以正确匹配 CSS 选择器。

如果我们在https://github.com/darrenjennings/vue-autosuggest/blob/master/src/Autosuggest.vue 中查看我们看到的组件本身

<input
      :type="internal_inputProps.type"
      :value="internalValue"
      :autocomplete="internal_inputProps.autocomplete"
      :class="[isOpen ? `${componentAttrPrefix}__input--open` : '', internal_inputProps['class']]"
      v-bind="internal_inputProps"
      aria-autocomplete="list"
      :aria-activedescendant="isOpen && currentIndex !== null ? `${componentAttrPrefix}__results-item--${currentIndex}` : ''"
      :aria-controls="`${componentAttrIdAutosuggest}-${componentAttrPrefix}__results`"
      @input="inputHandler"
      @keydown="handleKeyStroke"
      v-on="listeners"
    >

这必须在您的本地版本中进行修改以包含引导类。

【讨论】：