tefact

️ Avertissement

Ce projet n'est pas maintenu. Vous pouvez consulter notre nouvelle version Low-Code Editor dans staringos/mtbird.
Ce projet ne sera plus maintenu, vous pouvez consulter notre nouvelle version de l'éditeur low-code open source staringos/mtbird

Site Web | Utilisation | Documents | Exemple Communauté |

Téfact

Éditeur léger sans code pour website , H5 page et Form . Créez votre application sans code !

[Document chinois]

[Exemple]

Dépendances :

• Vue 2.x
• ÉlémentUI
• Toupet

Commencer

Recommander : exemple de projet Fork pour démarrer ou importer manuellement :

1. Dépendance d'installation :

yarn add @tefact/editor

2. Importez des styles dans votre fichier CSS ou moins :

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

3. Ajoutez le package @tefact à votre transport webpack.

webpack.config.js ou nuxt.config.js

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

4. Importez l'éditeur pour vous.

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

Concept de base

Cible

Target est un objet pour lequel nous modifions. Il peut s'agir d'une page H5/formulaire ou d'une page de site Web. Il s'agit d'une structure de données JSON pour décrire à quoi ressemble une page de formulaire.

Vous pouvez utiliser getDefaultFeature dans @tefact/editor pour générer des données cibles par défaut et les enregistrer quelque part, elles peuvent être utilisées directement dans @tefact/feature-form ou @tefact/feature-page

Éditeur

@tefact/editor est une vue Modifier pour une page de fonctionnalité ou un formulaire.

Paramètres

• valeur : la cible d'édition
• editorSetting : paramètres de l'éditeur

Événement

• addTarget : ajouter une cible dans l'éditeur
• editTarget : après les informations de base sur la cible de l'éditeur
• partager : basculer le partage cible
• sauvegarder : lors de la sauvegarde de la cible
• retour : lorsque l'éditeur dans l'éditeur revient en arrière

Page

@tefact/feature-page est un composant de vue pour les target qui ont un featureType = page . Pour prévisualiser une page, vous pouvez faire :

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

Formulaire

Identique page , @tefact/feature-form est utilisé pour prévisualiser ou afficher la cible qui a un featureType = form , vous pouvez faire :

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

Contribuer

Les PR et les problèmes sont tous les bienvenus, n'hésitez pas à poser des questions ou à soumettre votre code.

CONTRIBUER

Rejoindre la communauté

Scannez avec WeChat, rejoignez notre groupe.

Discorde