el-select 替换右侧icon

小蝈蝈啊

已于 2022-10-12 14:31:56 修改

阅读量1.6k

点赞数

文章标签： css3 css vue.js elementui

于 2022-06-09 16:41:43 首次发布

本文链接：https://blog.csdn.net/north_katydid/article/details/125206183

版权

这是一个关于Vue.js的博客，演示了如何创建一个带有自定义样式的下拉选择框组件。代码中展示了如何使用`el-select`和`el-option`元素，并通过`:class`和`:style`指令改变选框的外观。同时，`@visible-change`事件用于处理选框打开状态的变化。博客还涵盖了如何修改placeholder的初始和鼠标悬停时的颜色。

摘要由CSDN通过智能技术生成

直接上图上代码，直接复制即可
在这里插入图片描述

<template>
  <div class="myselect" :class="{'open': openIcon}">
    <el-select v-model="value" placeholder="请选择" @visible-change="openTrue">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <i class="el-icon-caret-bottom open-icon"></i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      openIcon:false,
    };
  },
  methods:{
      openTrue(val){
        this.openIcon = val
      }
  }
};
</script>

<style lang="scss">
.myselect {
  width:217px; 
  transition: all 1s;
  position: relative;
  .el-input__suffix {
    display: none;
  }
  .open-icon {
    position: absolute;
    right: 10px;
    top: 9px;
    font-size: 14px;
  }
  /* 修改 placeholder 初始化颜色*/
   .el-input__inner::placeholder {
      color:  #1f2329;
    }
    /* 谷歌 */
    .el-input__inner::-webkit-input-placeholder:hover {
      color:  #1f2329;
    }
    /* 火狐 */
    .el-input__inner:-moz-placeholder {
      color:  #1f2329;
    }
    /*ie*/
    .el-input__inner:-ms-input-placeholder {
      color: #1f2329;
    }

  /* 修改 placeholder 鼠标滑上颜色*/
  &:hover{
    .el-input__inner::placeholder {
      color:  #3370ff;
    }
    /* 谷歌 */
    .el-input__inner::-webkit-input-placeholder:hover {
      color:  #3370ff;
    }
    /* 火狐 */
    .el-input__inner:-moz-placeholder {
      color:  #3370ff;
    }
    /*ie*/
    .el-input__inner:-ms-input-placeholder {
      color: #3370ff;
    }
    .open-icon{
       color:  #3370ff;
    }
  }
  .el-input__inner {
    border: 1px solid #1f2329;
    &:hover{
      color: #3370ff;
      border-color: #3370ff;
      background-color: #e1eaff;
    }
  }
}
.open{
 .open-icon{
   transform: rotate(180deg);
 } 
}
</style>