Estoy creando una aplicación de tipo WYSIWYG donde un usuario puede escribir CSS en un área de texto y esa regla de CSS se aplicará al HTML en la página. Probé algo como esto en la plantilla.
<textarea v-bind="css"></textarea> <style v-html="css"></style>VueCompilerError: las etiquetas con efectos secundarios ( y ) se ignoran en las plantillas de componentes del cliente.
Agregue textarea con v-model:
<textarea v-model="css" />Puede crear una etiqueta de estilo en el gancho onMounted:
onMounted(() => { const style = document.createElement("style"); style.type = "text/css"; updateCss(style, css.value); document.getElementsByTagName("head")[0].appendChild(style); el.value = style; });Debe poder acceder a este elemento más tarde, así que asigne estilo a el.value.
Luego agregue el reloj en el valor de entrada:
watch(css, () => { updateCss(el.value, css.value); });Donde updateCss es una función:
const updateCss = (el, css) => { if (el.styleSheet) { el.styleSheet.cssText = css.value; } else { el.innerHTML = ""; el.appendChild(document.createTextNode(css)); } };Manifestación:
https://codesandbox.io/s/cocky-mestorf-uqz6f?file=/src/App.vue:246-463
Encontré una solución mucho mejor:
<template> <textarea v-model="css" /> <component :is="'style'" type="text/css" v-text="css"></component> </template> <script> import { ref } from "vue"; export default { setup() { const css = ref("body { background-color: blue; }"); return { css }; }, }; </script>El componente no arroja el error sobre la etiqueta de estilo:
<component :is="'style'">Tenga en cuenta que hay v-text en lugar de v-html. V-html podría no ser seguro.
Demostración: https://codesandbox.io/s/festive-germain-q9tg3?file=/src/App.vue:122-281