用哪些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>