这是“素颜”

化妆后

一、拆分写样式

从element组件拷贝button组件、下拉框组件、输入框组件，再分别改造；

二、样式

拷贝下来后，我们最终实现是有组件间的重叠关系，并再同一行

**1、要先调整组件间的位置，要把以上三个组件分别用div包裹再调整宽度（这个很重要，不然是不可能在同一行的），然后再通过display：inline-block让他们在同一行展示。

***2、***用position：relative 设置位置；这时子块是相对于他原本的位置定位，无论是否进行移动，其所占的位置仍然留有空位，后面的无定位块元素不会移动上来，因此，移动元素会导致覆盖其它框。若相对本身向上或向左的调整的话要设置top，left的值。
***3、***覆盖后使用z-index属性来设置层级关系，如果两个div 中 a class和b class发生重叠
.a{
z-index：1
}
以上设置会是a在b的上层，a会覆盖b。

我这里就是下拉框把输入框覆盖了；后面的搜索按键也是这样子实现

**

三、调整细节

**


这两个下拉框区别还是很大的；
**1、我在下拉框中添加看图标展示，这里需要做的事把图标单独用一个div包裹，再调整宽度（这个很重要，不然是不可能在同一行的），然后再通过display：inline-block让他们在同一行展示，再用position：relative ，调整top，left的值设置位置，道理是跟上面一样的，vue的话想要动态根据下拉框选中变换图标，只要绑定一个参数就行了
图标的话，可以看看啊里的图标库，下下来，引入相应的js文件就行，
图标的使用代码

引入js文件import icon from '../../icons/icon'
在vue的template中使用
<svg style="" aria-hidden="true">
  <use :href="item.href"></use>
</svg>

动态的

 <svg class="icon" aria-hidden="true">
        <use :href="href"></use>
      </svg>

2、下拉框三角下标的调整

再样式中更换content参数就可以了，content参数可以在element组件图标中获取

在项目中修改下拉框三角标样式，这样就完美替换调原来的丑丑的三角下标

  .el-icon-arrow-up:before {
  content: "复制值";
}

调整下拉框的宽度，每一个option的高度

 .el-select-dropdown__item {
    padding: 0px 10px;
    height: 44px;
}

基本思路就是这样，这样就不用再自己封装一个下拉输入框了，方便快捷很多
花了很多时间，查了很多资料终于是搞定了，希望少点兄弟姐妹们走弯路了