vue实现搜索框样式

Vue 实现搜索框样式

基础搜索框实现

使用 Vue 的模板语法和样式绑定创建基础搜索框：

<template>
  <div class="search-container">
    <input 
      v-model="searchQuery" 
      type="text" 
      placeholder="搜索..." 
      class="search-input"
    />
    <button @click="handleSearch" class="search-button">
      <i class="search-icon">🔍</i>
    </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: 500px;
  margin: 0 auto;
}

.search-input {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  flex-grow: 1;
  font-size: 16px;
}

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

.search-icon {
  font-size: 16px;
}
</style>

带自动完成的搜索框

添加自动完成功能：

<template>
  <div class="search-autocomplete">
    <input
      v-model="searchQuery"
      @input="handleInput"
      type="text"
      placeholder="搜索..."
      class="search-input"
    />
    <ul v-if="suggestions.length" class="suggestions-list">
      <li 
        v-for="(item, index) in suggestions" 
        :key="index"
        @click="selectSuggestion(item)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      suggestions: []
    }
  },
  methods: {
    handleInput() {
      // 模拟API调用
      if(this.searchQuery.length > 2) {
        this.suggestions = [
          `${this.searchQuery} 结果1`,
          `${this.searchQuery} 结果2`,
          `${this.searchQuery} 结果3`
        ]
      } else {
        this.suggestions = []
      }
    },
    selectSuggestion(item) {
      this.searchQuery = item
      this.suggestions = []
    }
  }
}
</script>

<style scoped>
.search-autocomplete {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

.suggestions-list {
  position: absolute;
  width: 100%;
  background: white;
  border: 1px solid #ddd;
  border-top: none;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 10;
}

.suggestions-list li {
  padding: 10px;
  cursor: pointer;
}

.suggestions-list li:hover {
  background: #f5f5f5;
}
</style>

动画效果搜索框

添加过渡动画效果：

<template>
  <div class="animated-search">
    <div class="search-wrapper" :class="{ focused: isFocused }">
      <input
        v-model="searchQuery"
        @focus="isFocused = true"
        @blur="isFocused = false"
        type="text"
        placeholder="搜索..."
        class="search-input"
      />
      <button class="search-button">
        <i class="search-icon">🔍</i>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      isFocused: false
    }
  }
}
</script>

<style scoped>
.animated-search {
  max-width: 500px;
  margin: 20px auto;
}

.search-wrapper {
  display: flex;
  border: 2px solid #ddd;
  border-radius: 30px;
  transition: all 0.3s ease;
  padding: 5px;
}

.search-wrapper.focused {
  border-color: #42b983;
  box-shadow: 0 0 8px rgba(66, 185, 131, 0.3);
}

.search-input {
  flex-grow: 1;
  border: none;
  outline: none;
  padding: 8px 15px;
  background: transparent;
  font-size: 16px;
}

.search-button {
  background: transparent;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.search-button:hover {
  background: rgba(66, 185, 131, 0.1);
}
</style>

移动端优化搜索框

针对移动设备的优化版本：

<template>
  <div class="mobile-search">
    <div class="search-bar">
      <input
        v-model="searchQuery"
        type="search"
        placeholder="搜索..."
        class="search-input"
      />
      <button class="clear-button" @click="clearSearch" v-show="searchQuery">
        ×
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    clearSearch() {
      this.searchQuery = ''
    }
  }
}
</script>

<style scoped>
.mobile-search {
  padding: 10px;
}

.search-bar {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  padding: 12px 40px 12px 15px;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 16px;
  -webkit-appearance: none;
}

.clear-button {
  position: absolute;
  right: 15px;
  background: none;
  border: none;
  color: #999;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

这些实现方法提供了从基础到高级的搜索框样式，可以根据具体需求选择或组合使用。每种实现都包含了完整的Vue组件代码和样式，可以直接集成到项目中。