vue renderiza archivos de plantilla basados ​​en datos de back-end, edita y obtiene una vista previa de los efectos en tiempo real

Recientemente, hay un archivo de plantilla que los usuarios deben editar en línea. Anteriormente, consideré directamente usar la edición de texto enriquecido. Sin embargo, esta vez el requisito menciona que la información clave ingresada debe almacenarse. en la base de datos, y hay una opción SELECT insertar. El backend devolverá todo el HTML con estilo.

La idea inicial era dividir el formulario en dos columnas, obtener una vista previa del formulario de la izquierda e insertarlo en el documento. Sin embargo, el DOM insertado dinámicamente no podía responder a los datos, así que cambié mi siguiente idea. , El DOM que debe mostrarse dinámicamente debe inicializarse de antemano y luego insertarse en la posición correspondiente una vez completada la representación HTML de la plantilla.

En cuanto al formato de datos de fondo, tempStr es html, la interpolación dinámica usa ${} y el formulario es la descripción del formulario, que se usa para representar el formulario:

Ideas:

template.vue:

efectos

El tipo temporal solo distingue la selección y puede agregar opciones de radio, casillas de verificación y otros formularios.