el-select下拉箭頭改成實心三角

稳住别慌發表於2024-09-10

1、vue3中寫一個三角元件IconDropDown.vue

<template>
  <div class="down-icon"></div>
</template>
<style lang="scss" scoped>
.down-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.down-icon::before {
  display: inline-block;
  width: 0;
  height: 0;
  content: "";
  border-top: 5px solid rgb(134 144 156);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
</style>

引入並使用元件

   <el-select
            v-model="formState.salary"
            placeholder="職位薪資"
            style="width: 300px;"
            clearable
            :suffix-icon="IconDropDown"
            @change="getJobsFn"
          >
            <el-option
              v-for="item in salaryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>

import IconDropDown from '@/components/IconDropDown.vue'

聯級選擇器

.search-box-el {
  .el-input__inner::placeholder,
  .el-select__placeholder {
    color: rgb(29, 33, 41) !important;
  }
  .el-cascader {
    border-radius: 6px;

    .el-input__wrapper {
      background: rgb(247 248 250);
      border: 0;
      box-shadow: none;
      .icon-arrow-down {
        svg {
          display: none;
        }
      }

      .icon-arrow-down::before {
        display: inline-block;
        width: 0;
        height: 0;
        content: "";
        border-top: 5px solid rgb(134 144 156);
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
      }
      &:hover {
        .icon-circle-close {
          svg {
            display: block;
          }
          .icon-arrow-down::before {
            display: none;
          }
        }
      }
    }
  }
}

2、vue2的方式

.search-box-el {
  .el-input__inner {
    height: 32px;
    line-height: 32px;
    background: rgb(247, 248, 250);
    border: 0;
  }  
  .el-input__inner::placeholder,
  .el-select__placeholder {
    color: rgb(29, 33, 41) !important;
  }
  .el-input__icon {
    line-height: 100%;  
  }

  .el-icon-arrow-up:before {
    display: inline-block;
    width: 0;
    height: 0;
    content: "";
    border-bottom: 5px solid rgb(134 144 156);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
  }
}

　　

相關文章