vue 动态绑定hover取值

优秀的土豆丝

于 2021-12-27 17:45:14 发布

阅读量2k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_36773704/article/details/122177188

版权

vue 专栏收录该内容

34 篇文章

订阅专栏

html中绑定style:style="menuStyle"

<el-menu-item class="super_menu_item" :style="menuStyle" :index="`/${item.index}`" :key="item.index">
  <i :style="{'color':theme.textColor}" :class="item.icon"></i>
  <span slot="title">{{ item.title }}</span>
</el-menu-item>

计算属性值返回动态取值

computed: {
  menuStyle() {
     return {
       '--bg-color': this.theme.sidebarColor,
       '--bg-color-hover': this.theme.headerColor,
       '--text-color':  this.theme.textColor
     }
   }
 }

css中绑定颜色

.el-menu-item:hover {
  background-color:var(--bg-color-hover) !important;
}

添加链接描述