tefact

️ Advertencia

Este proyecto no se mantiene. Puede consultar nuestra nueva versión Low-Code Editor en staringos/mtbird.
Este proyecto ya no se mantendrá, puede consultar nuestra nueva versión del editor de código bajo de código abierto staringos/mtbird

Sitio web | Documentos | Ejemplo | Comunidad |

Tefacto

Editor liviano sin código para website , H5 page y Form . ¡Construya su aplicación sin código!

[Documento chino]

[Ejemplo]

Dependencias:

• Vista 2.x
• ElementoUI
• Hablar con descaro a

Empezando

Recomendar: Bifurque el proyecto de ejemplo para comenzar o importe manualmente:

1. Instalar dependencia:

yarn add @tefact/editor

2. Importe estilos a su archivo css o less:

import "@tefact/editor/lib/index.css"

3. Agregue el paquete @tefact al transporte de su paquete web.

webpack.config.js o nuxt.config.js

{
    "build" : {
        "transpile" : [
          /@tefact/*/
        ],
    }
}

4. Importar editor a usted.

< template >
  < Editor
      :value = " target "
      :editorSetting = " editorSetting "
  ></ Editor >
</ template >
< script lang="ts">
import Vue from " vue " ;
import Editor , { getDefaultFeature } from " @tefact/editor " ;

export default Vue . extends ({
  data() {
    return {
      target: getDefaultFeature ( " page " ),
      editorSetting: {}
    }
  },
  components: {
    Editor
  }
})
</ script >

Concepto central

Objetivo

El objetivo es un objeto para el que editamos. Puede ser una página H5/página de formulario o una página de sitio web. Es una estructura de datos JSON para describir cómo se ve una página para formulario.

Puede usar getDefaultFeature en @tefact/editor para generar datos de destino predeterminados y guardarlos en algún lugar; se pueden usar directamente en @tefact/feature-form o @tefact/feature-page

Editor

@tefact/editor es una vista de edición para una página o formulario de funciones.

Parámetros

• valor: el objetivo de edición
• editorSetting: Configuración del editor

Evento

• addTarget: Agregar destino dentro del editor
• editTarget: información básica del objetivo después del editor
• compartir: alternar destino compartido
• guardar: cuando se guarda el objetivo
• atrás: cuando el editor está dentro del editor, alternar hacia atrás

Página

@tefact/feature-page es un componente de vista para aquellos target que tienen un featureType = page . Para obtener una vista previa de una página, puedes hacer:

< template >
  < Page :value = " target " ></ Page >
</ template >
< script lang="ts">
import Vue from " vue " ;
import Page , { DFFAULT } from " @tefact/feature-page " ;

export default Vue . extends ({
  data() {
    return {
      target: DFFAULT
    }
  },
  components: {
    Page
  }
})
</ script >

Forma

Lo mismo que page , @tefact/feature-form se usa para obtener una vista previa o mostrar aquellos objetivos que tienen un featureType = form , puedes hacer:

< template >
  < Form :value = " target " ></ Form >
</ template >
< script lang="ts">
import Vue from " vue " ;
import Form , { DFFAULT } from " @tefact/feature-page " ;

export default Vue . extends ({
  data() {
    return {
      target: DFFAULT
    }
  },
  components: {
    Form
  }
})
</ script >

Contribuyendo

Las relaciones públicas y los problemas son bienvenidos; no dude en hacer preguntas o enviar su código.

CONTRIBUYENDO

Únete a la comunidad

Escanea con wechat, únete a nuestro grupo.

Discordia