Vue-11-搜索框

一、概述

一个简单的搜索框，加上一个搜索图标，实现PC、PAD以及手机三端的适配展示。
实现效果 PC

实现效果 PAD

实现效果 手机

二、关键知识点

使用了@media实现对不同设备终端的样式调整，默认是PC端的样式。关于设备的max-width，参考的规则如下：

• 320px - 480px：移动设备
• 481px - 768px：iPad、平板电脑
• 769px - 1024px：小屏幕、笔记本电脑
• 1025px - 1200px：台式机、大屏幕
• 1201px 及以上：超大屏幕、电视

/* 移动设备样式 */
@media (max-width: 768px) {
  .search-container {
    margin: 15px; /* 增加边距 */
    max-width: none;
  }
  .search-wrapper {
    border-radius: 25px; /* 稍微增加圆角 */
  }
  .search-input {
    font-size: 15px; /* 稍微增加字体大小 */
    padding: 12px 15px; /* 增加内边距 */
  }
  .search-icon {
    width: 20px;
    height: 20px;
    margin-right: 15px;
  }
}

/* 更小的移动设备样式 */
@media (max-width: 480px) {
  .search-container {
    margin: 10px; /* 增加边距，但仍小于较大的移动设备 */
  }
  .search-wrapper {
    border-radius: 20px;
  }
  .search-input {
    font-size: 14px;
    padding: 10px 12px;
  }
  .search-icon {
    width: 18px;
    height: 18px;
    margin-right: 12px;
  }
}

组件的布局如下，样式也是按照如下布局命名。

三、实现

完整实现

<template>
  <div class="search-container">
    <div class="search-wrapper">
      <input
        type="text"
        v-model="searchQuery"
        @input="onSearch"
        @keyup.enter="onSearchClick"
        placeholder="搜索..."
        class="search-input"
      />
      <svg @click="onSearchClick" class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchComponent',
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    onSearch() {
      // 在输入时触发的搜索逻辑
      console.log('输入中:', this.searchQuery)
    },
    onSearchClick() {
      // 点击图标或按回车键时触发的搜索逻辑
      console.log('执行搜索:', this.searchQuery)
      // 这里可以添加更多的搜索逻辑，比如发送API请求等
    }
  }
}
</script>

<style scoped>
.search-container {
  margin: 20px;
  /* max-width: 400px; */
  width: 100%;
}
.search-wrapper {
  position: relative;
  width: 95%;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border: 2px solid transparent;
  border-radius: 30px;
  transition: all 0.3s ease;
}
.search-input {
  width: 95%;
  padding: 12px 15px;
  font-size: 16px;
  color: #333;
  background-color: transparent;
  border: none;
  outline: none;
}
.search-wrapper:focus-within {
  background-color: #fff;
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}
.search-input::placeholder {
  color: #999;
}
.search-icon {
  width: 20px;
  height: 20px;
  color: #999;
  transition: color 0.3s ease;
  cursor: pointer;
  margin-right: 15px;
}
.search-wrapper:focus-within .search-icon,
.search-icon:hover {
  color: #4a90e2;
}

/* 移动设备样式 */
@media (max-width: 768px) {
  .search-container {
    margin: 15px; /* 增加边距 */
    max-width: none;
  }
  .search-wrapper {
    border-radius: 25px; /* 稍微增加圆角 */
  }
  .search-input {
    font-size: 15px; /* 稍微增加字体大小 */
    padding: 12px 15px; /* 增加内边距 */
  }
  .search-icon {
    width: 20px;
    height: 20px;
    margin-right: 15px;
  }
}

/* 更小的移动设备样式 */
@media (max-width: 480px) {
  .search-container {
    margin: 10px; /* 增加边距，但仍小于较大的移动设备 */
  }
  .search-wrapper {
    border-radius: 20px;
  }
  .search-input {
    font-size: 14px;
    padding: 10px 12px;
  }
  .search-icon {
    width: 18px;
    height: 18px;
    margin-right: 12px;
  }
}
</style>

四、总结

刚开始的组件布局，是将icon放在了input上右边，采用了绝对定位的方式，但是后来发现，放在input里面当输入框过长的时候，图标和文字会重合，因此拆分为左右两部分。