vue3和elementPlus中的el-dropdown-menu中的背景樣式修改

1. 效果展示

2. 代碼展示

在el-dropdown-menu下加載類名,class="my-dropdown-menu"

  <el-dropdown-menu class="my-dropdown-menu"><el-dropdown-item :command="{ action: 'upgrade', data }">升級</el-dropdown-item><el-dropdown-item :command="{ action: 'downgrade', data }">降級</el-dropdown-item><el-dropdown-item :command="{ action: 'moveUp', data }">上移</el-dropdown-item><el-dropdown-item :command="{ action: 'moveDown', data }">下移</el-dropdown-item><el-dropdown-item :command="{ action: 'delete', data }">刪除</el-dropdown-item></el-dropdown-menu>

3. 樣式修改代碼

在style全局樣式下, 不加scoped

<style>
.my-dropdown-menu {background: #2b2c2f;border: 1px solid #2b2c2f;.el-dropdown-menu__item:hover {background: #2b2c2f;}.el-dropdown-menu__item:not(.is-disabled):focus,.el-dropdown-menu__item:not(.is-disabled):hover {background: #2b2c2f;}
}.my-dropdown-menu.el-popper.is-light,
.el-popper.is-light>.el-popper__arrow:before {background: #2b2c2f;border: 1px solid #2b2c2f;
}.el-popper.is-pure.is-light.el-tooltip.el-dropdown__popper {background: #2b2c2f;border: 1px solid #2b2c2f;
}
</style>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/94009.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/94009.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/94009.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！