前端vue实现搜索图标点击变成搜索框进行搜索

可以通过在Vue中绑定一个点击事件来实现这个效果，具体可以按照以下步骤进行：

1. 在模板中添加一个包含搜索图标和搜索框的容器，并为搜索图标绑定一个点击事件：

<template>
  <div class="search-container">
    <i class="search-icon" @click="toggleSearch"></i>
    <input type="text" v-if="showSearch" class="search-input" placeholder="输入关键词进行搜索" />
  </div>
</template>

2. 在Vue组件中定义一个变量来控制搜索框的显示与隐藏，并在点击事件中切换该变量的值：

<script>
export default {
  data() {
    return {
      showSearch: false
    }
  },
  methods: {
    toggleSearch() {
      this.showSearch = !this.showSearch
    }
  }
}
</script>

3. 在样式表中定义搜索图标和搜索框的样式，以及控制搜索框的显示与隐藏：

<style>
.search-container {
  position: relative;
}

.search-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url('path/to/search-icon.png');
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

.search-input {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 10px;
  outline: none;
  transition: all 0.2s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.search-input.show {
  opacity: 1;
  visibility: visible;
}
</style>

这样就可以实现点击搜索图标后搜索框的显示与隐藏了。如果需要实现搜索功能，还需要在输入框中绑定一个`v-model`指令，并在搜索按钮上绑定一个点击事件，触发搜索功能。