分享

成功el-menu设置选中项样式

 北方天空A 2020-11-17

<el-menu
      mode="horizontal"
      class="topMenu"
      background-color="transparent"
      text-color="#fff"
      active-text-color="#ffd04b"
      :default-active="ActiveIndex"
      :router="false"
      :unique-opened="true"
      @select="HandleSelect"
    >
      <el-menu-item index="1" @click="newPatient" v-if="if_newPatient">
        <div style="margin-top: 10px; text-align: center">
          <img style="width: 48px; height: 48px" src="@/assets/img/xjbl.png" />
        </div>
        <div style="font-size: 12px; margin-top: 2px; text-align: center">
          测试1
        </div>
      </el-menu-item>
      <el-menu-item index="2" @click="SelectCase" v-if="if_SelectCase">
        <div style="margin-top: 10px; text-align: center">
          <img style="width: 48px; height: 48px" src="@/assets/img/kjcx.png" />
        </div>
        <div style="font-size: 12px; margin-top: 2px; text-align: center">
          测试2
        </div>
      </el-menu-item>
</el-menu>
<style lang="scss" scoped>
.logo {
  height: 100%;
  float: left;
  padding: 10px 20px;
}
.topMenu {
  float: left;
}
.topActions {
  float: right;
}
.el-menu--horizontal > .el-menu-item {
  height: 88px;
  line-height: 10px;
}
.el-menu.el-menu--horizontal {
  border-bottom: 0px;
}
.el-menu-item {
  height: 88px;
  line-height: 88px;
}
.el-menu-item {
  padding-left: 10px;
  padding-right: 10px;
}
.el-menu-item.is-active {
   font-weight:bold !important;
}
</style>
关键代码:.el-menu-item.is-active {
   font-weight:bold !important;
}

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约