Vue音乐--搜索页面01_搜索框布局

「已注销」

于 2018-10-10 20:17:36 发布

阅读量1.2k

点赞数

分类专栏：移动端音乐项目文章标签： vue css 公共组件

本文链接：https://blog.youkuaiyun.com/kingAn123/article/details/83002736

版权

移动端音乐项目专栏收录该内容

21 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中创建一个搜索框组件，包括将其设计为公共组件，利用iconfont图标库，使用flex布局，并设置输入框样式。文章强调组件应主要派发事件，避免过多操作。此外，还提供了组件引用示例和iconfont的使用参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大概步骤：

在这里插入图片描述

目标效果

在这里插入图片描述

一、新建搜索框组件的布局

要点：
- 把输入框做成公共组件search-box
- 公共组件，尽量只派发事件，而不过多操作（除内部方法）
- 使用iconfont的ui字体
- 使用flew布局
- 设置input输入框的默认内容样式
- 配置好组件结构，在父组件search.vue中引用
SearchBox.vue

<div class="search-box">
	<i class="iconfont">&#xe601;</i>
	<input class="search-box_ins" :placeholder="placeholder" />
	<i class="iconfont">&#xe674;</i>
</div>

/*只展示部分样式代码*/
  .search-box{
    display: flex;  /*使用flew布局，排列图标和输入框*/
    align-items: center;
    box-sizing: border-box;
  }
  .search-box input{
    flex: 1;
    padding: 8px 10px; 
    border-radius: 6px;
  }
  /*输入框默认内容样式*/
  ::-webkit-input-placeholder {
    color:#ccc;
    font-size: 12px;
  }