Vue中使用Css的变量设置样式有时，在写逻辑上，DOM元素的样式需要根据逻辑进行动态变更。那么在Vue的组件中如何实现

目的

有时，在写逻辑上，DOM元素的样式需要根据逻辑进行动态变更。那么在Vue的组件中如何实现CSS的变量化.

设置变量

// 计算宽度
const computeClass = computed(() => {
  return {
    "--prependWidth":
      props.selectorInfo && props.selectorInfo.paramValue
        ? props.selectorInfo.paramValue.length < 29
          ? "175px"
          : props.selectorInfo.paramValue.length * 6 + 50 + "px"
        : "175px"
  };
});

上述代码，是根据传入的数据数目，动态计算组件的宽度，从而适配UI。

这里只是声明了一个变量，那么如何使用？

使用变量

<el-input
    v-model="refData.formData.paramValue"
    :style="computeClass"
    class="input-define-prepend">
      <template v-if="props.selectorInfo" #prepend>
        {{ 插槽 }}
      </template>
</el-input>

这里是DOM元素的配置，里面使用了:style="computeClass"，加载了变量信息

.input-define-prepend {
  .el-input-group__prepend {
    width: var(--prependWidth);
  }
}

这里是，变量的使用。

如果这篇文章你觉得还不错，请给个小关注，谢谢。您的关注，我的动力。