vue3 数据可视化大屏 - 数据资产大屏 项目开发中， 需要下拉菜单选择内容，设计师对这个下拉菜单做了美化，在设计图中多余遇到不同样式的下拉菜单，每次都要重新写样式，很耗费时间，所以想着把可能会修改的关键代码都列出来，下次就可以针对性的修改,节省开发时间。

因为element-ui组件很实用，所以下拉菜单一般会选择element-ui，不过vue3项目中element ui也升级成为了element-plus虽然很相似，但是代码中还是有细微的差别。在element-ui下有效果，换到element-plus可能会失效，所以针对element-plus遇到的问题再写一遍。

组件使用

<template>
  <div class="selected">
    <selected :list="list" v-model:active="value"></selected>
  </div>
</template>

<script>
import selected from './selected.vue'

export default {
  name: "elselects",
  components: {selected},
  data() {
    return {
      value: 0,
      list: [{
        value: 0,
        label: '昨日'
      }, {
        value: 1,
        label: '本月'
      }, {
        value: 2,
        label: '本年'
      },],
    }
  },
  methods: {
  },
}
</script>

<style lang="scss" scoped>
.el-selectedBody1 {
  width: 116px;
  height: 32px;
  background: url("./assets/selectedbg.png") no-repeat;
  background-size: 100% 100%;
}

:deep(.el-selectedBody2) {
  .el-input__wrapper {
    background: none;
    height: 28px;
    box-shadow: 0 0 0 0px #fff inset !important;
    outline: none;

    .el-input__inner {
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
    }
  }
}

.el-selectedBody3 {

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
    background: none !important;
  }

  .el-select-dropdown__item {
    font-size: 14px !important;
    font-family: PingFang;
    color: #FFFFFF !important;
    height: 30px !important;
    line-height: 30px !important;
    border: 1px solid rgba(#4a5f85, 0);
  }

  .el-popper__arrow {
    display: none;
  }

  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background: rgba(9, 27, 82, 0.6) !important;
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
    background: none !important;
  }

}

</style>
<style lang="scss">
.el-selectedBody3 {
  background: #0a1b50 !important;
  border: none !important;

  .el-popper__arrow::before {
    border: 1px solid #409eff !important;
    background: #409eff !important;
    right: 0;
  }
}

</style>

组件代码

<template>
  <div class="el-selectedBody1">
    <el-select @change="getData" popper-class="el-selectedBody3" :model-value="active" class="el-selectedBody2"
               placeholder="请选择">
      <el-option
          v-for="item in list"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
  </div>
</template>

<script>

export default {
  name: "elselect",
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    },
    active: {
      type: [Number, String],
      default() {
        return 0;
      }
    },
  },
  data() {
    return {}
  },
  methods: {
    getData(e) {
      this.$emit('update:active', e)
    }
  },
}
</script>

<style lang="scss" scoped>
.el-selectedBody1 {
  width: 116px;
  height: 32px;
  background: url("./assets/selectedbg.png") no-repeat;
  background-size: 100% 100%;
}

:deep(.el-selectedBody2) {
  .el-input__wrapper {
    background: none;
    height: 28px;
    box-shadow: 0 0 0 0px #fff inset !important;
    outline: none;

    .el-input__inner {
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
    }
  }
}

.el-selectedBody3 {

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
    background: none !important;
  }

  .el-select-dropdown__item {
    font-size: 14px !important;
    font-family: PingFang;
    color: #FFFFFF !important;
    height: 30px !important;
    line-height: 30px !important;
    border: 1px solid rgba(#4a5f85, 0);
  }

  .el-popper__arrow {
    display: none;
  }

  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background: rgba(9, 27, 82, 0.6) !important;
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
    background: none !important;
  }

}

</style>
<style lang="scss">
.el-selectedBody3 {
  background: #0a1b50 !important;
  border: none !important;

  .el-popper__arrow::before {
    border: 1px solid #409eff !important;
    background: #409eff !important;
    right: 0;
  }
}

</style>

更多element-plus使用问题整理

element-plus 使用实例汇总