Question

我的某些单文件组件需要从道具上悬停颜色。

我的解决方案是我以以下方式设置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 上，然后然后使用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 gzip压缩）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>

：在道具的Vue组件中悬停颜色

1 个答案:

1-CSS变量

2-Vue组件样式