f render

f-render | مصمم النماذج استنادًا إلى ElementUI

• مجموعة الاتصالات
• يقدم
• يلاحظ
• مميزة
• تجريبي
• درس تعليمي
• الوصول السريع في 1 دقيقة
  • الخطوة 1: التثبيت
  • الخطوة 2: التسجيل
  • الخطوة 3: الاستخدام
• وضع المستخدم
  • التكوين على أساس f-render
  • التكوين على أساس vue-ele-form
• حسب الطلب
  • تمت إضافة مكونات الامتداد الرسمية (خذ امتداد النص المنسق كمثال)
    • تثبيت المكونات
    • تسجيل المكون
    • خصائص التكوين
  • إضافة مكونات مخصصة
    • قم بإنشاء مكون وتسجيله عالميًا
    • تكوين الكتابة
    • دمج التكوين وتمريره
  • تخصيص تكوين المكون الأصلي وتكوين النموذج
  • علامات التبويب الصحيحة المخصصة
  • تخصيص النمط
• التنمية الثانوية
• f-render مجموعة الأسئلة والأجوبة
• وصف الدعائم
• فتحة
• علم البيئة
• شكر خاص للرعاة
• المساهمين

يقدم

f-render هي أداة تصميم نماذج مرئية تم تطويرها استنادًا إلى vue-ele-form، وهي مناسبة لمختلف محركات العمليات ومشاريع النماذج الديناميكية، مما يوفر وقت التطوير بشكل كبير.

يلاحظ

لاحظ أن هذا المصمم غير موجود بشكل مستقل، ولكنه يعتمد على نموذج vue-ele. يرجى التأكد من قراءة وثائق نموذج vue-ele قبل استخدامه.

مميزة

• وضع المكون: الوصول في وضع المكون، سهولة الوصول خلال دقيقة واحدة؛
• حجم صغير: حوالي 100k بعد ضغط Gzip؛
• سهل التوسيع: يمكن إضافة الخصائص والمكونات أو حذفها أو تعديلها不更改源码؛

تجريبي

https://dream2023.gitee.io/f-render/

درس تعليمي

على الرغم من أن f-render يمكنه تحقيق قدر كبير من التخصيص دون تغيير كود المصدر، إلا أن العديد من الأشخاص ما زالوا يأملون في إجراء تطوير ثانوي وفقًا لاحتياجات الشركة.

لذلك أطلقت برنامجًا تعليميًا لتنفيذ المشروع بأكمله من البداية. إذا كنت مهتمًا بعملية التنفيذ والتفكير في f-render، فيمكنك النقر فوق "تنفيذ مكون النموذج المرئي" من الصفر للتعلم.

الوصول السريع في 1 دقيقة

الخطوة 1: التثبيت

yarn add element-ui  # npm install element-ui -S
yarn add vue-ele-form # npm install vue-ele-form -S
yarn add f-render # npm install f-render -S 

الخطوة 2: التسجيل

 // vue-ele-form 的注册可参考：https://www.yuque.com/chaojie-vjiel/vbwzgu/xl46cd
import EleForm from "vue-ele-form" ;
import FRender from "f-render" ;
import ElementUI from "element-ui" ;
import "element-ui/lib/theme-chalk/index.css" ;

Vue . use ( ElementUI ) ;
Vue . use ( EleForm ) ;
Vue . component ( "f-render" , FRender ) ; 

الخطوة 3: الاستخدام

 < template >
  < f-render
    @save =" handleSave "
    :loading =" loading "
    height =" calc(100vh - 60px) "
    :config =" formConfig "
  />
</ template >

< script >
  export default {
    data ( ) {
      return {
        loading : false ,
        formConfig : { }
      } ;
    } ,
    methods : {
      handleSave ( res ) {
        // 这里是保存到 localStorage，你可以保存到服务器
        localStorage . setItem ( "form-config" , res ) ;
        this . $message . success ( "保存成功啦~" ) ;
      }
    } ,
    mounted ( ) {
      // 模拟异步加载
      this . loading = true ;
      setTimeout ( ( ) => {
        this . loading = false ;
        this . formConfig = localStorage . getItem ( "form-config" ) || "" ;
      } , 1000 ) ;
    }
  } ;
</ script > 

وضع المستخدم

نقسم الأشكال الديناميكية إلى مرحلتين:

• الأولى هي مرحلة التصميم: تصميم النموذج من خلال السحب والإسقاط؛
• ثم تأتي مرحلة المستخدم: السماح للمستخدمين بملء النموذج المصمم على شكل نموذج خالص.

نحن نطلق على هاتين المرحلتين وضع تصميم النماذج ووضع المستخدم على التوالي. لقد تحدثنا بالفعل عن تكوين النموذج في وضع التصميم، فلنلقِ نظرة على تكوين النموذج في وضع المستخدم:

التكوين على أساس f-render

من خلال السمة pure ، يمكن استخدامها مباشرة كنموذج. طريقة إرسال البيانات هي نفس طريقة vue-ele-form ، يرجى التحقق من الوثائق للحصول على التفاصيل.

 < template >
  < f-render
    v-model =" formData "
    :request-fn =" handleSubmit "
    @request-success =" handleSuccess "
    :config =" formConfig "
    pure
  />
</ template >

< script >
  export default {
    data ( ) {
      return {
        formData : { } ,
        formConfig : ""
      } ;
    } ,
    methods : {
      handleSubmit ( data ) {
        // eslint-disable-next-line no-console
        console . log ( data ) ;
        return Promise . resolve ( ) ;
      } ,
      handleSuccess ( ) {
        this . $message . success ( "创建成功" ) ;
      }
    } ,
    mounted ( ) {
      // 模拟异步加载
      this . loading = true ;
      setTimeout ( ( ) => {
        this . loading = false ;
        this . formConfig = localStorage . getItem ( "form-config" ) || "" ;
      } , 1000 ) ;
    }
  } ;
</ script > 

التكوين على أساس vue-ele-form

إذا لم يعد التصميم المرئي واستخدام النموذج هما نفس النظام، فيمكنك استخدام vue-ele-form مباشرة دون تثبيت f-render ، والتفاصيل هي كما يلي:

 < template >
  < ele-form
    v-model =" formData "
    :request-fn =" handleSubmit "
    @request-success =" handleSuccess "
    v-if =" formConfig "
    v-bind =" formConfig "
  />
</ template >

< script >
  export default {
    data ( ) {
      return {
        formData : { } ,
        formConfig : null
      } ;
    } ,
    methods : {
      handleSubmit ( data ) {
        // eslint-disable-next-line no-console
        console . log ( data ) ;
        return Promise . resolve ( ) ;
      } ,
      handleSuccess ( ) {
        this . $message . success ( "创建成功" ) ;
      }
    } ,
    mounted ( ) {
      // 模拟异步加载
      setTimeout ( ( ) => {
        try {
          // 这里必须对字符串进行反序列化
          this . formConfig = eval ( `( ${ localStorage . getItem ( "form-config" ) } )` ) ;
        } catch {
          this . $message . error ( "数据解析失败" ) ;
        }
      } , 1000 ) ;
    }
  } ;
</ script > 

حسب الطلب

تمت إضافة مكونات الامتداد الرسمية (خذ امتداد النص المنسق كمثال)

تثبيت المكونات

yarn add vue-ele-form-quill-editor

تسجيل المكون

 Vue . component ( "quill-editor" , EleFormQuillEditor ) ; 

خصائص التكوين

 < template >
  <!-- 省略其它属性 -->
  < f-render :comps =" comps " />
</ template >

< script >
  // 默认配置
  import comps from "f-render/src/fixtures/comps" ;
  // 富文本配置
  import quillEditor from "f-render/src/fixtures/extends/quill-editor" ;
  // 可以更改显示组件位置，默认为 10
  // 这里更改为 2，显示更靠前
  quillEditor . sort = 2 ;

  export default {
    data ( ) {
      return {
        // 拼接上即可
        comps : comps . concat ( quillEditor )
      } ;
    }
  } ;
</ script >

إضافة مكونات مخصصة

قم بإنشاء مكون وتسجيله عالميًا

تحتاج إلى إنشاء مكون مخصص وفقًا لوثيقة نموذج vue-ele وتسجيله.

تكوين الكتابة

يمكنك الرجوع إلى التكوين في التعليمات البرمجية المصدر فيما يلي الأمثلة وأوصاف السمات:

 // custom-url.js
export default {
  // 假如这个组件叫 url（必填）
  type : "custom-url" ,
  // 默认标签名（必填）
  label : "URL" ,
  // 用于排序，值越小，越靠前
  sort : 1 ,
  // 属性配置
  config : {
    // 属性配置说明地址（可省略）
    url : "https://www.xxx.com" ,
    // 组件属性配置（不知道啥是组件属性，可以看一下界面右侧）
    attrs : {
      // config 配置 参考 FormDesc:
      // https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf#KOPkD
      config : {
        // max 为属性名
        max : {
          type : "number" ,
          label : "最大输入长度"
        } ,
        name : {
          type : "input" ,
          label : "原生 name" ,
          // 必填
          required : true
        }
        // ....
      } ,
      // 默认值，如果在配置文件里设置了，则每个组件都会携带
      data : {
        name : "url"
      }
    } ,
    // 表单项配置，是 FormDesc 中非 attrs 的其它配置，
    // 具体可看：https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf#hl4pm
    common : {
      config : {
        // 默认值
        default : {
          type : "input" ,
          label : "默认值"
        }
      } ,
      data : { }
    }
  }
} ; 

دمج التكوين وتمريره

 < template >
  <!-- 省略其它属性 -->
  < f-render :comps =" comps " />
</ template >

< script >
  import comps from "f-render/src/fixtures/comps" ;
  import customUrl from "some/path/custom-url" ;
  export default {
    data ( ) {
      return {
        comps : comps . concat ( customUrl )
      } ;
    }
  } ;
</ script >

تخصيص تكوين المكون الأصلي وتكوين النموذج

• دليل تكوين المكون: f-render/src/fixtures/comps.js
• دليل تكوين النموذج: f-render/src/fixtures/form-props.js
• تكوين السمة المشتركة لعنصر النموذج: f-render/src/fixtures/form-item-common.js
• دليل المكونات الممتد: f-render/src/fixtures/extends/[扩展组件名].js

إذا كنت تريد تعديل خصائص المكونات أو خصائص النموذج، أو تقليل المكونات أو إضافتها، فيمكنك拷贝到自己的项目، والرجوع إلى تعليمات التكوين أعلاه، وإجراء التغييرات، وتمريرها:

 <!-- formProps 是表单属性 -->
<!-- comps 是组件列表和属性 -->
<!-- formItemCommon 是表单项通用属性配置 -->
< f-render
  :form-props =" formProps "
  :comps =" comps "
  :form-item-common =" formItemCommon "
/>

على وجه التحديد، إذا أردنا أن يحمل كل مكون input الخاصية clearable: true ، فيمكننا القيام بذلك:

 < template >
  <!-- 其它属性省略 -->
  <!-- 将更改后的 comps 传递过去即可 -->
  < f-render :comps =" comps " />
</ template >

< script >
  import comps from "f-render/src/fixtures/comps" ;
  // 查找 input 组件，当然你也可以看源码，直接查看索引
  const inputIndex = comps . findIndex ( item => item . type === "input" ) ;
  // 更改 config.attrs.data 值即可
  comps [ inputIndex ] . config . attrs . data = { clearable : true } ;

  export default {
    data ( ) {
      return {
        comps
      } ;
    }
  } ;
</ script >

علامات التبويب الصحيحة المخصصة

يمكننا التحكم فيما إذا كانت اللوحة اليمنى سيتم عرضها من خلال السمة isShowRight ، وتخصيص اسم اللوحة المحددة المعروضة من خلال rightTabs ، كما يلي:

 < template >
  <!-- 定制化右侧 tabs -->
  < f-render :right-tabs =" tabs " />
</ template >

< script >
  export default {
    data ( ) {
      return {
        tabs : [
          { label : "表单项属性配置" , name : "form-item-common" } ,
          { label : "组件属性配置" , name : "form-item-attrs" }
          // 注释下面的内容，就可以不显示
          // { label: "表单配置", name: "form-props" }
        ]
      } ;
    }
  } ;
</ script >

تخصيص النمط

ما عليك سوى الكتابة فوق النمط مباشرة، واحرص على عدم إضافة scoped ، وإلا فلن يكون التجاوز ناجحًا.

التنمية الثانوية

إذا لم يكن من الممكن تلبية متطلباتك أنت ومدير المنتج الخاص بك من خلال تخصيص属性样式وحده، فأعتقد شخصيًا أن الكود العام بسيط للغاية، ويمكنك clone أو تنزيله (يوصى باستخدامه). gitee) ، قم بإجراء التغييرات المقابلة هناك طريقتان لمعالجة التغييرات:

• ضعه مباشرة في دليل المشروع، وانسخ dependencies التثبيت إلى المشروع للتطوير؛
• قم بتطويره مباشرةً ثم نشره على الخادم الخاص بالشركة، وإذا كان مفتوح المصدر، فيمكنك إرساله إلى GitHub أو gitee، ثم تثبيت الخادم الخاص بك.

للحصول على تفاصيل محددة، ستكون هناك عملية مفصلة في البرنامج التعليمي المذكور في البداية وآمل أن تتمكن من دعمها.

f-render مجموعة الأسئلة والأجوبة

• 1. ما الذي لا يستطيع f-render فعله؟
• 2. كيفية تنفيذ خيارات تكوين URL؟

وصف الدعائم

 props : {
  // 表单内容
  config : {
    type : [ Object , String ] ,
    required : true
  } ,
  // 设计器整体高度
  height : {
    type : [ String , Number ] ,
    default : "400px"
  } ,
  // 保存格式
  saveFormat : {
    type : String ,
    default : "string" ,
    validator ( val ) {
      return [ "object" , "string" ] . includes ( val ) ;
    }
  } ,
  // 是否纯净（用于显示表单）
  pure : Boolean ,
  // 表单配置
  formProps : {
    type : Object ,
    default : ( ) => formProps
  } ,
  // 表单项配置
  formItemCommon : {
    type : Object ,
    default : ( ) => formItemCommonDefault
  } ,
  // 组件列表
  comps : {
    type : Array ,
    default : ( ) => comps
  } ,
  // 操作配置
  operations : {
    type : Array ,
    default : ( ) => [ "preview" , "data" , "code" , "batch" , "clear" , "save" ]
  } ,
  // 是否显示右侧
  isShowRight : {
    type : Boolean ,
    default : true
  } ,
  // 右侧属性面板 Tabs
  rightTabs : {
    type : Array ,
    default : ( ) => [
      { label : "表单项属性配置" , name : "form-item-common" } ,
      { label : "组件属性配置" , name : "form-item-attrs" } ,
      { label : "表单配置" , name : "form-props" }
    ]
  } ,
  // 是否在加载
  loading : Boolean ,

  // 表单相关（pure 为 true 时）, 同 vue-ele-form
  // https://www.yuque.com/chaojie-vjiel/vbwzgu/dyw8a7
  requestFn : Function ,
  isLoading : Boolean ,
  formError : Object ,
  // ....
} , 

فتحة

• اليسار: قائمة المكونات اليسرى
• الرئيسية: المنطقة الوسطى
• الرأس الرئيسي: منطقة تشغيل الرأس
• المحتوى الرئيسي: منطقة تصميم النموذج
• اليمين: منطقة تكوين السمة الصحيحة

مثال:

 < template >
  < f-render >
    <!-- 左侧插槽 -->
    < template v-slot:left =" {frender} " >
      < div >
        < div > left </ div >
        < div > {{frender.comps}} </ div >
      </ div >
    </ template >
  </ f-render >
  < template > </ template
> </ template >

بيانات frender عبارة عن مجموعة من بيانات مكون f-render . للحصول على بيانات محددة، يرجى الرجوع إلى كود المصدر. تحتوي الفتحات الأخرى على هذه المعلمة.

علم البيئة

مشروع	حالة	وصف
vue-ele-form		الاتصال بالنماذج المستندة إلى البيانات استنادًا إلى ElementUI
f-render		أداة تصميم النموذج المرئي تم تطويرها خصيصًا لـ vue-ele-form
vue-ele-form-json-editor		محرر JSON (امتداد vue-ele-form)
vue-ele-form-upload file		تحميل مكون تحميل الملف (امتداد vue-ele-form)
vue-ele-form-image-uploader		تحميل مكون تحسين الصورة (امتداد vue-ele-form)
vue-ele-form-tree-select		مكون مربع اختيار الشجرة (امتداد vue-ele-form)
vue-ele-form-table-editor		محرر النماذج (امتداد vue-ele-form)
vue-ele-form-dynamic		النموذج الديناميكي (امتداد vue-ele-form)
vue-ele-form-video-uploader		تحميل مكون تحسين الفيديو (امتداد vue-ele-form)
vue-ele-form-quill-editor		محرر نص منسق (امتداد vue-ele-form)
vue-ele-form-markdown-editor		محرر تخفيض السعر (امتداد vue-ele-form)
vue-ele-form-bmap		مكون خريطة بايدو (امتداد vue-ele-form)
vue-ele-form-codemirror		محرر الكود (امتداد vue-ele-form-gallery)
vue-ele-form-gallery		مكون عرض الصور/الفيديو (امتداد vue-ele-form)
vue-ele-form-data-editor		محرر بيانات خفيف الوزن (امتداد vue-ele-form)

شكر خاص للرعاة

خدمة عملاء ممتازة	شينغجي يوانتشوانغ	داموني	com.xzusoft	Seeenter	عالية النبرة

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

المساهمين

شكرًا لهؤلاء الأشخاص الرائعين (مفتاح الرموز التعبيرية):

تشانغ تشاوجي ؟

حكمة

إيوانابيثاتجي

يتبع هذا المشروع مواصفات جميع المساهمين، ونرحب بالمساهمات من أي نوع.