我的一些单文件组件需要从 Prop 中获取悬停颜色。

我的解决方案是我通过以下方式设置css变量(主要部分在mounted(){...})

<template> 
    <div class="btnWrapper" ref="btnWrapper">...</div> 
</template> 
... 
... 
props() { 
    color1: {type: String, default: 'blue'}, 
}, 
mounted () { 
    this.$refs.btnWrapper.style.setProperty('--wrapHoverColor', this.color1) 
} 
... 
... 
<style scoped> 
.btnWrapper { 
    --wrapHoverColor: pink; 
} 
.btnWrapper:hover { 
    background-color: var(--wrapHoverColor) !important; 
} 
</style> 

这个解决方案看起来有点棒。 但是伪元素可能没有更好的方法，很难从 js 控制。 你们有没有从 vue 组件中的 props 中获取伪元素的属性？

请您参考如下方法:

你有两种不同的方法来做到这一点。

1 - CSS 变量

如您所知，您可以根据要从 JS 移植到 CSS 的内容创建 CSS 变量，并将它们放入根元素 :style attr 在您的组件上创建的钩子(Hook)，然后通过 var(--x) 在您的 CSS 代码中使用它们。

<template> 
<button :style="style"> Button </button> 
</template> 
 
<script> 
export default { 
  props: ['color', 'hovercolor'], 
  data() { 
    return { 
      style: { 
        '--color': this.color, 
        '--hovercolor': this.hovercolor, 
      }, 
    }; 
  } 
} 
</script> 
 
<style scoped> 
button { 
  background: var(--color); 
} 
button:hover { 
  background: var(--hovercolor); 
} 
</style> 

2 - Vue 组件样式

vue-component-style是一个很小的(~1kb gzipped)mixin，用于在内部执行此操作。当您激活该 mixin 时，您可以在组件对象中编写整个 style 部分，并具有对组件上下文的完全访问权限。

<template> 
<button class="$style.button"> Button </button> 
</template> 
 
<script> 
export default { 
  props: ['color', 'hovercolor'], 
  style({ className }) { 
    return [ 
      className('button', { 
        background: this.color, 
        '&:hover': { 
          background: this.hovercolor, 
        }, 
      }); 
    ]; 
  } 
} 
</script>