tefact

คำเตือน

โปรเจ็กต์นี้ไม่ได้รับการดูแลรักษา คุณสามารถตรวจสอบ Low-Code Editor เวอร์ชันใหม่ของเราได้ใน 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 ของคุณ

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 >

แนวคิดหลัก

เป้า

Target คือออบเจ็กต์ที่เราแก้ไข อาจเป็นหน้า H5 / หน้าแบบฟอร์มหรือหน้าเว็บไซต์ เป็นโครงสร้างข้อมูล JSON เพื่ออธิบายว่าหน้าสำหรับแบบฟอร์มมีลักษณะอย่างไร

คุณสามารถใช้ getDefaultFeature ใน @tefact/editor เพื่อสร้างข้อมูลเป้าหมายเริ่มต้น และบันทึกลงในที่ใดที่หนึ่ง ซึ่งสามารถนำมาใช้โดยตรงที่ @tefact/feature-form หรือ @tefact/feature-page

บรรณาธิการ

@tefact/editor เป็นมุมมองแก้ไขสำหรับหน้าคุณลักษณะหรือแบบฟอร์ม

พารามิเตอร์

• ค่า: เป้าหมายการแก้ไข
• editorSetting: การตั้งค่าของเอดิเตอร์

เหตุการณ์

• addTarget: เพิ่มเป้าหมายภายในตัวแก้ไข
• editTarget: หลังจากเอดิเตอร์กำหนดเป้าหมายข้อมูลพื้นฐาน
• แบ่งปัน: สลับการแชร์เป้าหมาย
• บันทึก: เมื่อบันทึกเป้าหมาย
• กลับ: เมื่อตัวแก้ไขภายในตัวแก้ไขสลับกลับ

หน้าหนังสือ

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

มีส่วนร่วม

ยินดีต้อนรับ PRs & Issues ทุกท่าน อย่าลังเลที่จะถามคำถามหรือส่งรหัสของคุณ

มีส่วนร่วม

เข้าร่วมชุมชน

สแกนด้วย wechat เข้าร่วมกลุ่มของเรา

ความไม่ลงรอยกัน