关于vue的动态添加dom节点及样式不生效问题的解决办法

1.动态添加内容

v-html指令将HTML内容渲染到元素中

<template>
  <div>
    <div ref="popupRef" v-html="popupContent"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      popupContent: '<div class="test">changePipeline</div>',
    };
  },
};
</script>

<style>
/* 可以在这里定义类名的样式 */
/* 不使用 scoped 样式 */
.test {
  color: red;
  /* 更多样式属性 */
}
</style>

2.类名不生效问题解决

在Vue中，如果你的样式标签中包含 scoped 属性，那么样式只会应用到当前组件的作用域内，而不会影响其他组件或全局样式。这可能会导致在使用 v-html 或直接操作 innerHTML 时，新添加的HTML内容中的类名无法生效，因为样式作用域被限制在组件内部。

（1）不使用 scoped 样式

<style>
/* 不使用 scoped 样式 */
.test {
  color: red;
}
</style>

（2）使用 /deep/ 或 ::v-deep 伪类选择器

<style scoped>
/* 使用 ::v-deep 伪类选择器 */
:deep(.test) {
  color: red;
}
</style>

(3) 在全局样式中定义类名