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

大概步骤：

目标效果

---

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

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

<div class="search-box">
	<i class="iconfont">i>
	<input class="search-box_ins" :placeholder="placeholder" />
	<i class="iconfont">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;
  }

• 关于iconfont的使用，可以看往期文章

---

项目来源：慕课网
如有建议和疑问可联系
QQ：1017386624
邮箱：[email protected]