搜索功能（二）-搜索页面——搜索栏基本布局

最新推荐文章于 2022-11-16 16:45:27 发布

viceen

最新推荐文章于 2022-11-16 16:45:27 发布

阅读量1.9k

点赞数

分类专栏：项目-小程序-mpvue框架文章标签： css html vue css3

本文链接：https://blog.csdn.net/weixin_44867717/article/details/109233593

版权

项目-小程序-mpvue框架专栏收录该内容

62 篇文章 4 订阅

订阅专栏

该博客详细介绍了如何构建一个搜索页面的布局，包括搜索栏的基本设置、输入框与图标、取消按钮的显示逻辑。在样式方面，使用了less进行样式定义，实现了搜索框的样式，如背景色、内边距、输入框与图标的位置等。在功能上，通过Vue.js实现了搜索关键字的输入及取消功能，当输入关键字时，取消按钮会显示，点击取消则清空输入。这是一个关于前端开发，特别是Vue.js和less应用的实例。

摘要由CSDN通过智能技术生成

搜索页面

搜索栏基本布局

在搜索页serch/main.less导入样式文件

.search {
  padding: 20rpx;
  background: #eee;
  .search-content {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    position: relative;
    .search-input {
      height: 60rpx;
      line-height: 60rpx;
      background: #fff;
      padding: 0 20rpx;
      flex: 1;
      display: flex;
      align-items: center;
      icon {
        margin-right: 10rpx;
        display: block;
        width: 16px;
        height: 16px;
      }
      input {
        flex: 1;
        font-size: 15px;
      }
    }
    .cancel {
      height: 60rpx;
      line-height: 60rpx;
      margin-left: 10rpx;
    }
    .search-modal {
      position: absolute;
      width: 100%;
      left: 0;
      top: 60rpx;
      /* background: #f5f5f5; */
      /* padding: 20rpx; */
      overflow-y: auto;
      .search-item {
        height: 60rpx;
        line-height: 60rpx;
        border-bottom: 1px #eee solid;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.history {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
}

.history-list {
  display: flex;
  padding: 20rpx 10rpx;
  flex-wrap: wrap;
  .history-item {
    margin: 10rpx 10rpx;
    padding: 20rpx;
    background: #eee;
  }
}

在serch/index.vue中进行导入样式

<style scoped lang="less">
  @import './main.less';
</style>

搭建布局：

第一步：搜索页基本布局

在这里插入图片描述

展示效果

在这里插入图片描述

第二步：给搜索框增加图标和提示语

在这里插入图片描述

展示效果

在这里插入图片描述

第三步：取消按钮，默认不显示；当输入字时，取消按钮显示

结构

 <template>
  <div>
<!-- 顶部搜索栏 -->
    <div class="search">
      <div class="search-content">
        <!-- 输入框 -->
        <div class="search-input">
          <icon type='search' size='16'/>
            <!-- v-model='keyword' 绑定输入字 -->
          <input @input='queryData' v-model='keyword' placeholder="请输入关键字" />
        </div>
        <!-- 取消按钮 -->
        <button class="cancel" v-if='keyword' @click='handleCancel'>取消</button>
       </div>
     </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      // 搜索关键字
      keyword: '',
    }
  },
  methods: {
    handleCancel () {
      // 取消搜索
      this.keyword = ''
    }
  }
}
</script>
<style scoped lang="less">
  @import './main.less';
</style>

输入文字，显示取消按钮; 点击取消按钮，隐藏取消按钮

在这里插入图片描述