vue , uni-app，微信小程序，app , 自定义搜索框, 好看的搜索框。自定义搜索按钮,搜索栏，左边输入框右边搜索按钮，搜索图标。element ui

932人阅读 2024/7/1 11:51 总访问：4921635 评论：0 收藏：0 手机

分类: 前端

[TOC]

### 效果一
这个是小程序端的用的

设计图：
![](https://img.tnblog.net/arcimg/aojiancc2/4da057284483481fae0b432a399e9a6e.png)

view:
```
<view class="seach-box">
    <view class="seach-box-wrap">
        <view class="seach-box-icon">
            <image :src="`${CssImgPath}/imgs/search.png`" class="seach-box-icon-content" />
        </view>
        <view class="seach-box-input">
            <input class="uni-input" placeholder-class="seach-box-title-input" placeholder="请输入学生姓名" />
        </view>
        <view class="seach-box-but">查询</view>
    </view>
</view>
```
样式：
```
.seach-box {
    height: 90rpx;
    background: #FFFFFF;
    // background: #ffabcd;
    border-radius: 45rpx 45rpx 45rpx 45rpx;
    // display: flex;
    line-height: 90rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* 垂直居中 */

    .seach-box-wrap {
        display: flex;
        width: 100%;
        padding-left: 30rpx;
        padding-right: 20rpx;

        .seach-box-icon {
            width: 27rpx;
            height: 66rpx;
            line-height: 66rpx;
            // background-color: #5EC6A7;
            display: flex;
            align-items: center;

            .seach-box-icon-content {
                width: 38rpx;
                height: 30rpx;
            }
        }

        .seach-box-input {
            flex: 1;
            display: flex;
            align-items: center;
            // background-color: burlywood;
            margin-left: 16rpx;

            .uni-input {
                width: 100%;
            }
        }

        .seach-box-but {
            color: #FFFFFF;
            text-align: center;
            line-height: 66rpx;
            height: 66rpx;
            width: 120rpx;
            background: #5EC6A7;
            border-radius: 32rpx 32rpx 32rpx 32rpx;
        }
    }
}
```

### 效果二
这个是小程序端的用的

设计图：
![](https://img.tnblog.net/arcimg/aojiancc2/e36a320d43aa4486aa44f3b79965d495.png)

view:
```
<view class="search-area">
  <view class="seach-box">
    <view class="seach-box-wrap">
      <view class="seach-box-input">
        <input class="uni-input" placeholder-class="seach-box-title-input" placeholder="请输入课程名称" />
      </view>
      <view class="seach-box-icon">
        <image :src="`${CssImgPath}/imgs/search.png`" class="seach-box-icon-content" />
      </view>
      
    </view>
  </view>
</view>
```
样式：
```
  .search-area {
    background: #ffffff;
    padding-left: 20rpx;
    padding-right: 20rpx;

    .seach-box {
      height: 61rpx;

      background: #f4f4f4;
      // background: #ffabcd;
      border-radius: 44rpx 44rpx 44rpx 44rpx;

      // display: flex;
      line-height: 90rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      /* 垂直居中 */
      .seach-box-wrap {
        display: flex;
        width: 100%;
        padding-left: 30rpx;
        padding-right: 20rpx;

        .seach-box-icon {
          width: 27rpx;
          height: 66rpx;
          line-height: 66rpx;
          margin-right: 10rpx;
          // background-color: #5EC6A7;
          display: flex;
          align-items: center;
          .seach-box-icon-content {
            width: 38rpx;
            height: 30rpx;
          }
        }
        .seach-box-input {
          flex: 1;
          display: flex;
          align-items: center;
          // background-color: burlywood;
          margin-left: 16rpx;
          .uni-input {
            width: 100%;
          }
        }
        .seach-box-but {
          color: #ffffff;
          text-align: center;
          line-height: 66rpx;
          height: 66rpx;
          width: 120rpx;
          background: #5ec6a7;
          border-radius: 32rpx 32rpx 32rpx 32rpx;
        }
      }
    }
  }
```


### 效果三
这个是pc端的用的

![](https://img.tnblog.net/arcimg/aojiancc2/c372ad3a959d4ec9a32c7341f8519ad0.png)

**view:**
```
<div class="search-wapper">
	<div class="lesson-search">
		<el-input placeholder="请输入任务名称"></el-input>
		<div class="search-btn">
			<el-icon color="#fff">
				<Search />
			</el-icon>
		</div>
	</div>
</div>
```

样式：
```
.search-wapper {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-top: 15px;
	padding-right: 15px;

	.lesson-search {
		width: 266px;
		height: 38px;
		display: flex;
		align-items: center;
		padding-left: 15px;

		border-radius: 19px;
		border: 1px solid #e7e7e9;

		.el-input {
			flex: 1;

			// 去掉el-input的边框
			:deep(.el-input__wrapper) {
				border: none !important;
				box-shadow: none !important;
			}
		}

		.search-btn {
			width: 42px;
			height: 32px;
			text-align: center;
			padding-top: 5px;

			background: #1880ff;
			border-radius: 16px;
			margin-right: 2px;
		}
	}
}
```

### 效果四
这个是pc端的用的

![](https://img.tnblog.net/arcimg/aojiancc2/93e8badd91b444e89da6a014c51d5505.png)

**view:**
```
<div class="search-wapper">
  <div class="lesson-search">
    <label for="search-input">
      <div class="lab">课程</div>
      <div class="icon">
        <el-icon color="#60646E">
          <CaretBottom />
        </el-icon>
      </div>
    </label>
    <el-select id="search-input" v-model="selectLessonId" clearable filterable remote reserve-keyword
      placeholder="请输入课程名称">
      <el-option v-for="item in lessonList" :key="item.lessonID" :label="item.lessonName"
        :value="item.lessonID" />
    </el-select>
    <div class="search-btn">
      <el-icon color="#fff">
        <Search />
      </el-icon>
    </div>
  </div>
</div>
```

**样式：**
```
.search-wapper {
  display: flex;
  align-items: center;

  .lesson-search {
    width: 266px;
    height: 38px;
    display: flex;
    align-items: center;
    padding-left: 15px;

    border-radius: 19px;
    border: 1px solid #E7E7E9;

    label {
      display: flex;
      align-items: center;
    }

    .lab {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 12px;
      color: #60646E;
      margin-right: 3px;
    }

    .icon {
      padding-top: 3px;
    }

    .el-select {
      flex: 1;

      :deep(.el-select__wrapper) {
        box-shadow: none;
      }

      :deep(.el-select__icon) {
        display: none;
      }

      :deep(.el-select__icon.el-select__clear) {
        display: block;
      }
    }

    .search-btn {
      width: 42px;
      height: 32px;
      text-align: center;
      padding-top: 5px;

      background: #1880FF;
      border-radius: 16px;
      margin-right: 2px;
    }
  }
}
```

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

vue , uni-app，微信小程序，app , 自定义搜索框, 好看的搜索框。自定义搜索按钮,搜索栏，左边输入框右边搜索按钮，搜索图标。element ui

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}