首页 前端知识 【vue elementUI】修改el-dropdown样式

【vue elementUI】修改el-dropdown样式

2024-06-13 21:06:57 前端知识 前端哥 739 133 我要收藏

实现效果如下:

代码如下:

                <el-dropdown trigger="click" @command="handleCommand" active-text-color="#606266">
                  <span class="product-card">{{
                    getCategoryName(categoryId)
                  }}</span>
                  <el-dropdown-menu slot="dropdown">
                    <template v-for="(item, index) in categories">
                      <el-dropdown-item
                        class="xlcdList"
                        :style="
                          item.id == categoryId
                            ? 'color: #606266; background-color: #ecf5ff;'
                            : ''
                        "
                        :key="index"
                        :command="item.id"
                        >{{ item.categoryName }}</el-dropdown-item
                      >
                    </template>
                  </el-dropdown-menu>
                </el-dropdown>
.el-dropdown-menu {
  background-color: #478068;
}


.xlcdList {
  background-color: #478068;
  color: white;
  &:hover {
    // background-color: #478068;
    color: #606266;

  }
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11996.html
标签
评论
发布的文章

Vue——事件修饰符

2024-06-20 00:06:30

dhtmlx-gantt 甘特图

2024-06-20 00:06:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!