tefact

️ Warnung

Dieses Projekt wird nicht gepflegt. Sie können unsere neue Version des Low-Code-Editors in staringos/mtbird überprüfen
Dieses Projekt wird nicht mehr gepflegt, Sie können sich unsere neue Version des Open-Source-Low-Code-Editors staringos/mtbird ansehen

Website |. Dokumente |

Tefact

Leichter No-Code-Editor für website , H5 page und Form . Erstellen Sie Ihre Anwendung ohne Code!

[Chinesisches Dokument]

[Beispiel]

Abhängigkeiten:

• Vue 2.x
• ElementUI
• Sass

Erste Schritte

Empfehlung: Beispielprojekt zum Einstieg verzweigen oder manuell importieren:

1. Abhängigkeit installieren:

yarn add @tefact/editor

2. Importieren Sie Stile in Ihre CSS- oder kleinere Datei:

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

3. Fügen Sie das @tefact -Paket zu Ihrem Webpack-Transport hinzu.

webpack.config.js oder nuxt.config.js

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

4. Importieren Sie den Editor für Sie.

< 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 >

Kernkonzept

Ziel

Ziel ist ein Objekt, das wir bearbeiten. Es kann eine H5-Seite/Formularseite oder eine Website-Seite sein. Es handelt sich um eine JSON-Datenstruktur, um zu beschreiben, wie eine Seite für ein Formular aussieht.

Sie können getDefaultFeature in @tefact/editor verwenden, um Standardzieldaten zu generieren und diese irgendwo zu speichern, sodass sie direkt in @tefact/feature-form oder @tefact/feature-page verwendet werden können

Editor

@tefact/editor ist eine Bearbeitungsansicht für eine Funktionsseite oder ein Formular.

Parameter

• Wert: das Bearbeitungsziel
• editorSetting: Einstellung des Editors

Ereignis

• addTarget: Ziel im Editor hinzufügen
• editTarget: Grundlegende Informationen zum Ziel des Editors
• Teilen: Zielfreigabe umschalten
• Speichern: Beim Speichern des Ziels
• zurück: Beim Editor innerhalb des Editors zurück umschalten

Seite

@tefact/feature-page ist eine Ansichtskomponente für das target mit featureType = page . Um eine Vorschau einer Seite anzuzeigen, können Sie Folgendes tun:

< 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 >

Bilden

Wie bei page wird @tefact/feature-form für die Vorschau oder Anzeige verwendet. Wenn das Ziel ein featureType = form hat, können Sie Folgendes tun:

< 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 >

Mitwirken

PRs und Probleme sind alle willkommen. Sie können gerne Fragen stellen oder Ihren Code einreichen.

BEITRAGEN

Treten Sie der Community bei

Scannen Sie mit Wechat und treten Sie unserer Gruppe bei.

Zwietracht