一最安 2021-09-25 19:10 采纳率: 84.4%
浏览 65
已结题

请问如何vue如何实现选择器下拉菜单是图标选择而不是文字选择?

img


如图,我想要实现上图的效果,但我查询了element-ui库发现选择器都是基于文字,请问有何好的解决方法吗?求解。

img

img


<template>
<div id="search">
  <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" :style="
  {height: '100%'}">
    <el-select v-model="select" slot="prepend" placeholder="请选择分类维度">
      
      <el-option value="1" :style="{display:'inline-block',height:'70px'}">
        <slot>
          <img src="../assets/baidu.png" title="百度" alt="百度"/>
        </slot>
      </el-option>
      <el-option value="2" :style="{display:'inline-block',height:'70px'}">
        <slot>
          <img src="../assets/google.png" title="谷歌" alt="谷歌"/>
        </slot>
      </el-option>
      <el-option value="3" :style="{display:'inline-block',height:'70px'}">
        <slot>
          <img src="../assets/juejin.png" title="掘金" alt="掘金"/>
        </slot>
      </el-option>

    </el-select>
<!--    <el-button slot="append" icon="el-icon-search"></el-button>-->
  </el-input>





</div>
</template>

<script>
export default {
  name: "search",
  data() {
    return {

      input3: '',
      select:'1'
    }
  }



}
</script>




<style scoped>

/deep/.el-input__icon{
  position: relative;
  margin-right: -130px;
  margin-top: 5px;
}

/*/deep/is-reserve{*/
/*  transform:none*/
/*}*/





#search{
  margin:120px
}
.input-with-select{
  position: relative;
  width: 459px;
  height: 64px;
  margin-top: 2vw;
  background-color:#fff;
  border-radius:50px;

}
/deep/ .el-input-group__prepend {
  background-color: #F5F7FA;
  color: #909399;
   vertical-align: middle;
   display: table-cell;
  position: relative;
  border: 1px solid #DCDFE6;
  border-radius: 50px 0 0 50px;
  padding: 0 5px;
  width: 50px;
  height: 100%;
  white-space: nowrap;


}

img{
  width: 70px;
  height: 70px;
}


/*/deep/.el-input__inner{*/
/*  display: none;*/
/*}*/

</style>

  • 写回答

1条回答 默认 最新

  • 本堃不方 2021-09-25 19:24
    关注

    需求明白了,问题没明白

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 10月30日
  • 已采纳回答 10月22日
  • 创建了问题 9月25日

悬赏问题

  • ¥15 office打开卡退(新电脑重装office系统后)
  • ¥300 FLUENT 火箭发动机燃烧EDC仿真
  • ¥15 【Hadoop 问题】Hadoop编译所遇问题hadoop-common: make failed with error code 2
  • ¥15 vb6.0+webbrowser无法加载某个网页求解
  • ¥15 RPA财务机器人采购付款流程
  • ¥15 计算机图形多边形及三次样条曲线绘制
  • ¥15 根据protues画的图用keil写程序
  • ¥200 如何使用postGis实现最短领规划?
  • ¥15 pyinstaller打包错误
  • ¥20 cesm的气溶胶排放文件