vue实现搜索框样式

Vue 实现搜索框样式

在 Vue 中实现搜索框样式可以通过多种方式完成，包括使用原生 HTML 和 CSS，或者结合第三方 UI 库如 Element UI、Vuetify 等。以下是几种常见的方法：

原生 HTML 和 CSS 实现

使用 Vue 模板和样式绑定可以实现一个基础的搜索框。

<template>
  <div class="search-container">
    <input
      v-model="searchQuery"
      type="text"
      placeholder="搜索..."
      class="search-input"
      @keyup.enter="handleSearch"
    />
    <button class="search-button" @click="handleSearch">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    handleSearch() {
      console.log('搜索内容:', this.searchQuery)
    }
  }
}
</script>

<style scoped>
.search-container {
  display: flex;
  align-items: center;
  max-width: 400px;
  margin: 0 auto;
}

.search-input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  flex: 1;
  outline: none;
}

.search-button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.search-button:hover {
  background-color: #36a371;
}
</style>

使用 Element UI 实现

Element UI 提供了丰富的组件，可以快速实现一个美观的搜索框。

<template>
  <div class="search-container">
    <el-input
      v-model="searchQuery"
      placeholder="请输入搜索内容"
      class="search-input"
      @keyup.enter.native="handleSearch"
    >
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="handleSearch"
      />
    </el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    handleSearch() {
      console.log('搜索内容:', this.searchQuery)
    }
  }
}
</script>

<style scoped>
.search-container {
  max-width: 400px;
  margin: 0 auto;
}
</style>

使用 Vuetify 实现

Vuetify 是另一个流行的 Vue UI 框架，提供了 Material Design 风格的组件。

<template>
  <div class="search-container">
    <v-text-field
      v-model="searchQuery"
      placeholder="搜索..."
      outlined
      dense
      hide-details
      class="search-input"
      @keyup.enter="handleSearch"
    >
      <template v-slot:append>
        <v-btn icon @click="handleSearch">
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
      </template>
    </v-text-field>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    handleSearch() {
      console.log('搜索内容:', this.searchQuery)
    }
  }
}
</script>

<style scoped>
.search-container {
  max-width: 400px;
  margin: 0 auto;
}
</style>

实现搜索功能

搜索框通常需要与后端 API 交互或在前端进行数据过滤。

<template>
  <div>
    <input
      v-model="searchQuery"
      type="text"
      placeholder="搜索..."
      @input="handleSearch"
    />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  },
  methods: {
    handleSearch() {
      console.log('搜索内容:', this.searchQuery)
    }
  }
}
</script>

以上方法可以根据项目需求选择适合的实现方式。原生实现适合轻量级需求，而 UI 框架可以快速实现美观且功能丰富的搜索框。