tefact

️ Предупреждение

Этот проект не поддерживается. Вы можете проверить нашу новую версию редактора Low-Code в staringos/mtbird.
Этот проект больше не будет поддерживаться. Вы можете ознакомиться с нашей новой версией редактора low-code с открытым исходным кодом staringos/mtbird.

Веб-сайт | Использование | Документы | Пример Сообщество |

Тефакт

Легкий редактор без кода для website , H5 page и Form . Создайте свое приложение без кода!

[Китайский документ]

[Пример]

Зависимости:

• Вью 2.x
• ЭлементUI
• Сасс

Начиная

Рекомендую: создайте пример проекта для начала или импортируйте его вручную:

1. Установить зависимость:

yarn add @tefact/editor

2. Импортируйте стили в ваш файл CSS или меньше:

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

3. Добавьте пакет @tefact в транспорт вашего веб-пакета.

webpack.config.js или nuxt.config.js

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

4. Импортируйте редактор к вам.

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

Основная концепция

Цель

Цель — это объект, который мы редактируем. Это может быть страница H5/страница формы или страница веб-сайта. Это структура данных JSON, описывающая, как выглядит страница формы.

Вы можете использовать getDefaultFeature в @tefact/editor для создания целевых данных по умолчанию и сохранить их где-нибудь, чтобы их можно было использовать непосредственно в @tefact/feature-form или @tefact/feature-page

Редактор

@tefact/editor — это представление редактирования для страницы или формы функции.

Параметры

• значение: цель редактирования
• editorSetting: Настройка редактора.

Событие

• addTarget: добавить цель в редакторе.
• editTarget: основная информация после цели редактора
• поделиться: переключить целевую долю
• save: при сохранении цели
• назад: когда редактор в редакторе переключается назад

Страница

@tefact/feature-page — это компонент представления для тех target у которых есть featureType = page . Чтобы просмотреть страницу, вы можете сделать:

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

Содействие

PR и проблемы приветствуются, не стесняйтесь задавать вопросы или отправлять свой код.

ВКЛАД

Присоединяйтесь к сообществу

Сканируйте с помощью wechat, присоединяйтесь к нашей группе.

Раздор