el-dropdown:下拉框

最新推荐文章于 2024-03-27 08:00:00 发布

秃头小宝贝(柚子君)

最新推荐文章于 2024-03-27 08:00:00 发布

阅读量382

点赞数

文章标签： elementui

本文链接：https://blog.csdn.net/qq_43557302/article/details/132402983

版权

下拉框

<template>
  <div>
    <el-dropdown @command="handleCommand">
      <el-button size="small" class="yearButton">
        {{ year }}<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu class="my-dropdown-item" slot="dropdown">
        <el-dropdown-item class="my-dropdown-item" command="2021">2021</el-dropdown-item>
        <el-dropdown-item class="my-dropdown-item" command="2022">2022</el-dropdown-item>
        <el-dropdown-item class="my-dropdown-item" command="2023">2023</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<style>
.yearButton{
  background-color: black;
}
.yearButton:hover {
  background-color: #423e3e !important;
}
.my-dropdown-item {
  background-color: #3a3a42 !important;
}
.my-dropdown-item:active {
  background-color: #797171;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>

<script>
export default {
  data() {
    return {
      year: 2021
    }
  },
  methods: {
    handleCommand(command) {
      this.year = command
      // this.$message('click on item ' + command);
    }
  }
}
</script>

在这里插入图片描述