vue.js - 用哪些element-plus组件可以实现该搜索框的效果呢?

Question

用哪些element-plus组件可以实现该搜索框的效果呢?

• default
  
• 输入过程中该下拉框一直存在
  
• 按回车后转到搜索页面。

这里首先有一个表单

<el-form class="w-96" action="https://segmentfault.com/search">  <el-form-item class="mb-0">    <el-input      placeholder="搜索"      :prefix-icon="Search"      v-model="search"      name="q"    />  </el-form-item></el-form> 

之后考虑下拉框如何实现

尝试一: 使用Dropdown组件

playground

<script setup lang="ts">import { ref, version as vueVersion } from 'vue'import { version as epVersion } from 'element-plus'import { ElementPlus, Search } from '@element-plus/icons-vue'const msg = ref('Hello World!')const search = ref("");</script><template>  <el-dropdown trigger="click">    <el-form class="w-96" action="https://segmentfault.com/search">      <el-form-item class="mb-0">        <el-input          placeholder="搜索"          :prefix-icon="Search"          v-model="search"          name="q"        />      </el-form-item>    </el-form>    <template #dropdown>      <el-dropdown-menu>        <el-dropdown-item>你好</el-dropdown-item>        <el-dropdown-item>你好</el-dropdown-item>      </el-dropdown-menu>    </template>   </el-dropdown></template><style scoped>  .mb-0 {    margin-bottom: 0;  }</style>

问题

1. 弹出框的长度和输入框的长度不一样长
   这个容易解决，在el-input和el-dropdown-menu上设置相同的宽度即可。
2. 带有箭头
   需要自己添加一些css样式去掉箭头，并将弹出框稍微上移。

3. 输入空格，触发下拉框的隐藏和消失，并且空格无法作为输入内容。

4. 按下回车后，不会跳转到搜索页面。

尝试二: 使用Popper组件

playground

<script setup lang="ts">import { ref, version as vueVersion } from 'vue'import { version as epVersion } from 'element-plus'import { ElementPlus, Search } from '@element-plus/icons-vue'const msg = ref('Hello World!')const search = ref("");</script><template>  <el-popover placement="bottom" trigger="click" :show-arrow="false" width="20rem" popper-style="margin-top:-10px">    <template #reference>      <el-form action="https://segmentfault.com/search" class="w-96">        <el-form-item class="mb-0">          <el-input            placeholder="搜索"            :prefix-icon="Search"            v-model="search"            name="q"          />        </el-form-item>      </el-form>      </template>    <ul>      <li>你好</li>      <li>你好</li>    </ul>  </el-popover></template><style scoped>  .mb-0 {    margin-bottom: 0;  }  .w-96 {    width: 20rem;  }</style>

遇到的问题和dropdown是一样的，但是popover上有show-arrow属性，去掉箭头更容易一些，只需设置show-arrow: false。popper-style属性也可以更容易地设置pop元素，poper-style="margin-top: -10px"让它位置靠上一些。

但是得自己写类似<el-dropdown-menu>上的样式(这里的el-dropdonwn-menu好像不能单独使用，必须在el-dropdown内部。)。

总结

两种尝试都没有成功。

Answer 1

想复杂，其实下拉框自己实现更容易一些

当点击其他位置时，下来框收起。不知道下面这个实现是否有问题。

document.documentElement.addEventListener('click', () => {  show.value = false;})

playground

<script setup lang="ts">import { onMounted, ref, version as vueVersion } from 'vue'import { version as epVersion } from 'element-plus'import { ElementPlus, Search } from '@element-plus/icons-vue'const msg = ref('Hello World!')const search = ref("");const infos = ["你好", "大家好"];const show = ref(false);document.documentElement.addEventListener('click', () => {  show.value = false;})</script><template>  <div class="relative">    <el-form class="w-96" action="https://segmentfault.com/search">      <el-form-item class="!mb-0">        <el-input          placeholder="搜索"          :prefix-icon="Search"          v-model="search"          name="q"          @click.stop="show = !show"        />      </el-form-item>    </el-form>     <ul v-show="show" class="absolute my-0 list-style-none px-0 py-2 bg-white shadow rounded absolute w-96">      <li v-for="item in infos" class="py-2 px-4 cursor-pointer hover:bg-gray-200">{{ item }}</li>    </ul>  </div></template><style></style>

Answer 2

问题1和2的解决方案

对于问题1，即弹出框的长度和输入框的长度不一致的问题，可以通过为el-dropdown-menu和el-input设置相同的CSS样式来解决。由于el-dropdown-menu默认样式可能与el-input不一致，因此需要显式地为其设置宽度，以确保它们宽度相同。

对于问题2，要去掉箭头并稍微上移弹出框，可以使用el-dropdown组件的show-arrow属性设置为false来隐藏箭头，并通过设置popper-class属性为自定义的CSS类来调整弹出框的位置。

问题3的解决方案

问题3中提到的输入空格后触发下拉框隐藏和消失，以及空格无法作为输入内容的问题，可以通过监听input事件并阻止默认行为来解决。在el-input组件上添加@input事件监听器，并在事件处理函数中阻止空格的默认行为。

问题4的解决方案

问题4涉及到按下回车后不会跳转到搜索页面的问题。这可以通过监听keyup.enter事件来实现。在el-input组件上添加@keyup.enter事件监听器，并在事件处理函数中执行跳转到搜索页面的逻辑。通常这可以通过编程式导航来实现，例如在Vue Router中使用router.push方法。

由于具体的代码实现取决于你的项目结构和所使用的技术栈（如Vue Router的版本等），这里只提供大致的思路和方向。你需要根据自己的实际情况来编写相应的代码。

最后，关于你提到的“两种尝试都没有成功”，这可能是因为你在实现过程中遇到了一些具体的问题或错误。通过仔细检查代码、调试和查阅Element Plus的文档，你应该能够找到并解决这些问题。如果你需要更具体的帮助，可以提供更详细的代码和错误信息，以便进行更准确的分析和指导。