设置vue 3单个文件组件的样式标记的内容

pcww981p 于 2023-01-31 发布在 Vue.js

关注(0)|答案(3)|浏览(116)

我需要在我的项目中呈现一些随机/动态的html数据，这些数据可能包含样式标签，默认情况下vue.js不允许在模板中使用样式标签，以避免样式混乱，这是一个非常好的选择。为了让我的项目正常工作，我尝试了github上的一些运行时组件项目，但他们不接受我需要的css样式。所以我想出了创建自己的运行时组件来接受css样式数据的解决方案。我想要的代码是这样的：

<template>
  <div v-html="template"></div>
</template>

<script>
export default {
  name: "DynamicTemplate",
  props: {template: String, style: String}
}
</script>

<style scoped>
// style data goes here
</style>

任何替代的工作解决方案也是受欢迎的：）
我在组件样式标签上尝试了v-html和v-text属性（没有任何结果），还使用了带有base64编码的css代码的css @import语句（得到了一些错误，如无法读取未定义的属性），但它们都不起作用：（

vue.js

来源：https://stackoverflow.com/questions/75276149/set-content-of-vue-3-single-file-components-style-tag

3条答案

按热度按时间

hyrbngr71#

下面是一个传递的示例，它可以在项目中传递动态HTML数据，其中包含一个使用样式标记的示例

<template>
  <div>
    <div v-html="template" :style="style"></div>
  </div>
</template>

<script>
export default {
  name: 'DynamicTemplate',
  props: {
    template: {
      type: String,
      required: true
    },
    style: {
      type: Object,
      required: false,
      default: () => {}
    }
  }
}
</script>

这是正在使用的组件。

<DynamicTemplate
  :template="<p>This is some dynamic HTML content</p>"
  :style="{ color: 'red', font-size: '14px' }">
</DynamicTemplate>

赞(0）回复(0）举报 2023-01-31

idv4meu82#

下面是一个可以在项目中传递动态HTML数据的传递示例以及一个动态传递类的示例

<template>
  <div>
    <div v-html="template" :class="classes"></div>
  </div>
</template>

<script>
export default {
  name: 'DynamicTemplate',
  props: {
    template: {
      type: String,
      required: true
    },
    classes: {
      type: Object,
      required: false,
      default: () => {}
    }
  }
}
</script>

这是正在使用的组件。

<DynamicTemplate
  :template="template"
  :classes="classes"
/>

赞(0）回复(0）举报 2023-01-31

wh6knrhe3#

您可以将style标记中的数据封装在vue提供的component标记中，方法如下-〉

<component :is="'style'"> .test-class { color: red; }....Your style data </component>

在我创建的这个项目中可以找到相同的示例
https://codesandbox.io/s/interesting-dewdney-id9erd?file=/src/components/HelloWorld.vue

赞(0）回复(0）举报 2023-01-31

我来回答

设置vue 3单个文件组件的样式标记的内容

3条答案

相关问题

热门标签

最新问答