vue.js - :hover color in vue components from props

Question

我的一些单文件组件需要从 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 中获取伪元素的属性？

Answer 1

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

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>