schema form editor

صانع نموذج المخطط

schema-form-maker هو محرر نماذج مرئي يعتمد على vue.

للحصول على وثائق مفصلة، ​​راجع الفصول ذات الصلة من wiki. تثبيت التبعيات |. قم بإنشاء النموذج |. قم بعرض النموذج

تثبيت التبعيات

استخدم npm الأصلي للتثبيت، cnpm غير مدعوم في الوقت الحالي.

 npm install

(راجع التثبيت للحصول على التفاصيل)

تشغيل المحرر

بعد الانتهاء من التثبيت، قم بالتنفيذ

 npm run dev

قم بتشغيل محرر النماذج، وبعد اكتمال بدء التشغيل، افتح http://localhost:8080/ للوصول.

(راجع العملية للحصول على التفاصيل)

بناء النموذج

ينقسم محرر النماذج إلى ثلاث مناطق على اليسار والوسط واليمين:

شريط المكونات

في أقصى الجانب الأيسر من العرض يوجد [شريط المكونات]، ويمكنك استخدام السحب والإفلات لإضافة المكونات إلى النموذج الموجود في المنتصف [منطقة البناء].

منطقة البناء

في منتصف العرض توجد [منطقة البناء]، والتي تعرض النموذج الذي يتم تحريره حاليًا.
بعد النقر لتحديد أحد عناصر النموذج، يمكنك تحريره في [قائمة التكوين] على اليمين.
يمكنك الضغط على ctrl + s أو cmd + s في أي وقت أثناء عملية التحرير للحفظ.

(لمزيد من التفاصيل، يرجى الرجوع إلى نموذج منطقة البناء والتشييد)

قائمة التكوين

في أقصى الجانب الأيمن من العرض توجد [قائمة التكوين]، والتي تسمح لك بتحرير عناصر النموذج المحددة في [منطقة البناء].

مخطط التصدير

بعد الانتهاء من بناء النموذج، انقر فوق الزر [الهيكل] الموجود أسفل منطقة البناء لعرض مخطط النموذج في مربع الحوار المنبثق.
في الزاوية اليمنى العليا من مربع حوار المخطط، يوجد زران [نسخ] و[تنزيل]، يمكن استخدامهما لتصدير المخطط.

تقديم النموذج

بعد تصدير المخطط، يمكنك استخدام مكون عرض نموذج المخطط لإعادة عرض النموذج في مشروعك الخاص.

رمز العينة:

< template >
  ...
    <!-- DeviceSchema 为渲染表单需要的 schema -->
    <!-- device 为表单数据 -->
    < SchemaFormRender
      :schema = " DeviceSchema "
      :data = " device "
    />
    < el-button @click = " updateDevice " >
      提交
    </ el-button >
  ...
</ template >
< script >
...
export default {
  ...
  methods : {
    async updateDevice () {
      // 用户操作表单后 this.device 的数据会实时更新
      // 这里可以直接通过 this.device 访问到表单中的数据
      await axios . put ( ` http://api.com/device/ ${ this . device . id } ` , this . device );
      this . $message . success ( '保存成功' );
    }
  }
}
</ script >