vue-select下拉组件默认搜索栏需隐藏的技术求助

嗨，我看到你在用vue-select（或者你封装的wifi-select组件）创建下拉列表，想要去掉默认的搜索栏来保持简洁——其实完全不用靠CSS硬隐藏，组件本身就提供了官方的配置项来实现这个需求，比用display: none要优雅得多！

推荐方案：使用组件自带的searchable属性 #

vue-select原生支持通过searchable这个prop来禁用搜索功能，设置为false后，组件会自动不渲染搜索栏，从根源上解决问题，不会留下多余的DOM结构或者样式冲突：

修改你的代码如下：

<wifi-select 
  class="wifi-login__string" 
  placeholder="String" 
  :options="['String','Email','Date']" 
  :clearable="false"
  :searchable="false"
> </wifi-select>

为什么不推荐用CSS隐藏？ #

用display: none虽然能暂时隐藏搜索栏，但可能会带来一些潜在问题：

• 组件内部的布局逻辑可能依赖搜索栏的存在，隐藏后可能出现空白或者布局偏移
• 多余的DOM节点依然存在，虽然看不见，但会增加页面的DOM数量
• 如果组件后续版本更新，搜索栏的类名可能变化，导致CSS失效

万一封装的组件不支持searchable怎么办？ #

如果你的wifi-select是自定义封装的，没有暴露searchable属性，那可以用CSS精准隐藏搜索栏（针对原生vue-select的结构）：

.wifi-login__string .vs__search {
  display: none;
}

不过还是优先建议检查封装组件的文档，看看是否支持传递原生vue-select的props，这样是最稳妥的方式。

内容的提问来源于stack exchange，提问作者Anant Vikram Singh