tefactダウンロード - tefactソースコードのダウンロード

tefact

その他のカテゴリー

1.0.0

ダウンロード

️警告

このプロジェクトはメンテナンスされていません。staringos/mtbird で新しいバージョンのローコードエディターを確認できます。
このプロジェクトは今後保守されなくなります。オープンソースのローコードエディター staringos/mtbird の新しいバージョンをチェックしてください。

ウェブサイトの使用例 | サポート

テファクト

website 、 H5 page 、 Form用の軽量のコード不要エディタ。コードなしでアプリケーションを構築できます。

【中国語文書】

[例]

依存関係:

Vue 2.x
要素UI
サス

はじめる

推奨: サンプルプロジェクトをフォークして開始するか、手動でインポートします。

依存関係をインストールします。

yarn add @tefact/editor

スタイルを CSS ファイルまたはそれ以下のファイルにインポートします。

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

@tefactパッケージを Webpack トランスポートに追加します。

webpack.config.jsまたはnuxt.config.js

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

エディターをインポートします。

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

コアコンセプト

ターゲット

ターゲットは編集対象のオブジェクトです。これは、フォームのページがどのように見えるかを説明するための JSON データ構造です。

@tefact/editorでgetDefaultFeature使用してデフォルトのターゲットデータを生成し、それをどこかに保存すると、 @tefact/feature-formまたは@tefact/feature-pageに直接使用できます。

エディタ

@tefact/editor特集ページまたはフォームの編集ビューです。

パラメータ

値: 編集対象
editorSetting: エディタの設定

イベント

addTarget: エディター内にターゲットを追加します。
editTarget: エディターターゲットの基本情報の後
共有: ターゲット共有を切り替えます
save: 対象を保存する場合
back: エディター内でエディターの戻るを切り替えたとき

ページ

@tefact/feature-page 、 featureType = page持つtargetのビューコンポーネントです。ページをプレビューするには、次のようにします。

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

形状

pageと同様に、 @tefact/feature-form 、ターゲットがfeatureType = form持つものをプレビューまたは表示するために使用されます。次のことができます。

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