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

请问如何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 孟德尔随机化混杂因素
  • ¥15 关于react-hook组件用函数控制是否渲染的及时性问题。
  • ¥50 Linux下的软件,要做模块化拆分。进程间通信是否有开源框架可以借用?
  • ¥100 修改原有的MYSQL存储代码,在最右边添加多列数据
  • ¥20 Open Interpreter 使用时报错: still has pending operation at deallocation, the process may crash
  • ¥15 qt中链接动态链接库,调用其中的函数,该函数的参数需要传入回调函数,自己创建的回调函数无法作为参数传递进去
  • ¥15 matlab svm二分类代码问题
  • ¥40 求一款能支持ios15以上的屏蔽越狱插件。比较好用的
  • ¥15 C++ QT对比内存字符(形式不定)
  • ¥30 C++第三方库libiconv 远程安装协助