Vue2.x 中伪元素内容的动态样式

Question

我有一个组件，基本上是一个图标和一个工具提示；它在鼠标悬停时显示工具提示（其文本作为道具来自父组件）。我在伪元素的帮助下实现了工具提示，因此我需要使用 prop 的值更新伪元素的内容。我还知道 CSS 的伪元素规则是 DOM 的一部分，因此可以使用 JavaScript 方法更改它们，但我发现了一堆基本上可以解决的问题适用于任何 CSS 属性，但不适用于content（我可以看到它们适用（例如，适用于工具提示的宽度属性或其颜色），但奇怪的是不适用于该content属性），这是我到目前为止所做的，任何帮助将不胜感激：

\n

<template>\n    <div>\n        <!-- <style>\n            :root {\n            --info-msg: {{tooltipContent}};\n            }\n        </style> -->\n        <div class="infoBar">\n            <svg-icon\n                fill="#d5d5dc"\n                :width="16"\n                :height="16"\n                name="common/c-info"\n                class="infoBar__icon"\n            />\n        </div>\n    </div>\n\n</template>\n\n<script>\nexport default {\n  name: 'ContentInfo',\n  props: {\n    tooltipContent: {\n      type: String,\n      default: 'hint text goes here'\n    }\n  },\n  mounted () {\n    console.log(this.tooltipContent)\n    this.applyCSS()\n  },\n\n  beforeUpdate () {\n    this.applyCSS()\n  },\n  methods: {\n    applyCSS () {\n      const cssRule = `\n      .infoBar:after{\n        content: ${this.tooltipContent};\n      }`\n      const style = document.createElement('style')\n      style.type = 'text/css'\n      this.$el.appendChild(style)\n      style.innerHTML = cssRule\n    }\n  }\n\n}\n</script>\n\n<style lang="postcss" >\n\n  .infoBar{\n    position: relative;\n    margin-left: 24px;\n    &::after {\n      background-color: #000;\n      font-size: 12px;\n      color: #fff;\n      border-radius: 2px;\n      width: 198px;\n      height: 40px;\n     /*content: var(--info-msg)*/\n      display: none;\n      padding: 11px 26px 10px 27px;\n      position: absolute;\n      top: 0;\n      left: 80%;\n      transform: translate(-50%, calc(-100% - 10px));\n      z-index: 999;\n    }\n    &::before {\n      background-color: #000;\n      content: '';\n      display: none;\n      position: absolute;\n      width: 10px;\n      height: 6px;\n      z-index: 999;\n      top: 0;\n      left: 80%;\n      transform: translate(-50%, calc(-100% - 10px)) rotate(45deg);\n    }\n    &:hover::after {\n      display: block;\n    }\n    &:hover::before {\n      display: block;\n    }\n    &__icon:hover{\n        fill: #e4002b;\n      }\n  }\n\n  </style>\n

\n

Answer 1

按照以下步骤，您可以在 css 中使用 props 作为 css 变量：

1. 在计算中使用 props 返回 css 变量的对象并将该对象绑定到组件的样式
2. 您应该为组件指定一个类名，因为可以从 css 样式部分的类名中访问 c​​ss 变量
3. 至于应该采用字符串格式才能正常工作的 css 变量，您应该使用JSON.stringify()（这是 css 属性的情况content）

运行下面的示例并亲自查看，after悬停显示的元素的颜色和文本都是作为来自父组件的道具：

Vue.component('pseudo', {
  data() {
    return {
      title: 'Hover me',
    }
  },
  props: {
    color: {
      type: String,
    },
    text: {
      type: String,
    }
  },
  computed: {
    cssVars() {
      return {
        '--color': this.color,
        '--text': JSON.stringify(this.text),
      }
    }
  },
  template: `<div class="content" :style="cssVars">{{title}}</div>`,
});

var vm = new Vue({
  el: '#app',
});

.content {
  color: red;
}

.content:hover::after {
  content: var(--text);
  color: var(--color);
  margin-left: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <pseudo color="green" text="I'm from Prop!!"></pseudo>
</div>