Vue项目中使用element-plus UI库-并对下拉搜索框样式修改-el-select代码封装

对下列列表进行自定义 

基础代码

样式

样式修改

 
<style lang="less">
// .ly-tab-sou {
//   .el-input__suffix {
//     display: none;
//   }
// }
.popper-ly-tab-sou {
  --el-bg-color-overlay: #1f2328;
  --el-border-color-light: #30353c;
  .el-scrollbar {
    --el-fill-color-light: #484d56;
  }
  .el-popper__arrow {
    display: none;
  }
  .el-select-dropdown__item.selected {
    color: #31daff;
  }
  .el-select-dropdown__item {
    color: #eaecef;
  }
}
style>

使用

<SearchSelect
          class="ly-tab-ssu"
          v-model="selectVal"
          :options="CurrencyList"
          :filterable="true"
          :prefix="true"
          placeholder="搜索"
          @onChangeSelect="selectChange"
        />
 
 
<script setup>
import { ref } from 'vue';
import SearchSelect from '@/views/Prices/components/SearchBar/SearchSelect.vue';
const selectVal = ref('');
const options = ref([
  {
    value: '选项1',
    label: '选项1'
  },
  {
    value: '选项2',
    label: '选项2'
  }
]);
const selectChange = (val) => {
  console.log('selectChange', val);
};
script>

 代码封装

<template>
  <el-select
    class="ly-tab-sou"
    popper-class="popper-ly-tab-sou"
    v-model="selectVal"
    :filterable="filterable"
    :placeholder="placeholder"
    @change="selectChange"
  >
    <template #prefix v-if="prefix">
      <img src="@/assets/images/prices/search.svg" />
    template>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  el-select>
template>
 
<script setup>
import { ref, defineProps, defineEmits, computed } from 'vue';
 
const props = defineProps({
  modelValue: {
    type: [Number, String],
    default: ''
  },
  options: {
    type: Array,
    default: () => []
    // [{label: '全部合约',value: 'all'}]
  },
  filterable: {
    type: Boolean,
    default: false
  },
  prefix: {
    type: Boolean,
    default: false
  },
  align: {
    type: String,
    default: 'right'
  },
  placeholder: {
    type: String,
    default: '搜索'
  }
});
 
const emits = defineEmits(['update:modelValue', 'onChangeSelect']);
const selectVal = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits('update:modelValue', val);
  }
});
 
const selectChange = (val) => {
  //   console.log('selectChange', val);
  emits('onChangeSelect', val);
};
script>
<style lang="less" scoped>
.ly-tab-sou {
  width: 225px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid #404040;
  background: #121212;
  display: flex;
  align-items: center;
  :deep(.el-input__inner) {
    color: #fff;
  }
  :deep(.select-trigger) {
    width: 100%;
  }
  // :deep(.el-input__suffix) {
  //   .el-input__suffix-inner {
  //     .el-icon {
  //       background-image: url('@/assets/images/prices/arrow.svg');
  //       width: 6px;
  //       height: 4px;
  //       background-size: cover;
  //       svg {
  //         display: none;
  //       }
  //     }
  //   }
  // }
}
style>
 
<style lang="less">
// .ly-tab-sou {
//   .el-input__suffix {
//     display: none;
//   }
// }
.popper-ly-tab-sou {
  --el-bg-color-overlay: #1f2328;
  --el-border-color-light: #30353c;
  .el-scrollbar {
    --el-fill-color-light: #484d56;
  }
  .el-popper__arrow {
    display: none;
  }
  .el-select-dropdown__item.selected {
    color: #31daff;
  }
  .el-select-dropdown__item {
    color: #eaecef;
  }
}
style>