f render

f-render | ElementUI 기반 폼 디자이너

• 커뮤니케이션 그룹
• 소개하다
• 알아채다
• 특성
• 데모
• 지도 시간
• 1분만에 빠른 접속
  • 1단계: 설치
  • 2단계: 등록
  • 3단계: 사용
• 사용자 모드
  • f-render 기반 구성
  • vue-ele-form 기반 구성
• 맞춤형
  • 공식 확장 구성요소 추가(서식 있는 텍스트 확장을 예로 사용)
    • 구성 요소 설치
    • 구성요소 등록
    • 구성 속성
  • 맞춤 구성요소 추가
    • 구성요소를 생성하고 전역적으로 등록
    • 구성 작성
    • 구성 병합 및 전달
  • 맞춤형 오리지널 컴포넌트 구성 및 폼 구성
  • 맞춤형 오른쪽 탭
  • 스타일 사용자 정의
• 2차 개발
• f-render Q&A 컬렉션
• 소품 설명
• 슬롯
• 생태학
• 후원자님께 특별히 감사드립니다.
• 기여자

소개하다

f-render는 vue-ele-form을 기반으로 개발된 시각적 양식 디자인 도구로, 다양한 프로세스 엔진 및 동적 양식 프로젝트에 적합하여 개발 시간을 크게 절약합니다.

알아채다

이 디자이너는 독립적으로 존재하지 않으며 vue-ele-form에 의존합니다. 사용하기 전에 vue-ele-form의 설명서를 꼭 읽어보세요.

특성

• 구성 요소 모드: 구성 요소 모드로 액세스하고 1분 만에 쉽게 액세스할 수 있습니다.
• 작은 크기: Gzip 압축 후 약 100k ;
• 확장 용이:不更改源码속성과 구성 요소를 추가, 삭제 또는 수정할 수 있습니다.

데모

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

지도 시간

f-render는 소스 코드를 변경하지 않고도 많은 양의 사용자 정의를 달성할 수 있지만 많은 사람들은 여전히 ​​회사의 필요에 따라 2차 개발을 수행하기를 희망합니다.

그래서 전체 프로젝트를 처음부터 구현하기 위한 튜토리얼을 시작했습니다. 구현 프로세스와 f-render에 관심이 있는 경우 Implement Visual Form Component from Zero를 클릭하여 학습할 수 있습니다.

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 기반 구성

시각적 디자인과 양식 사용이 더 이상 동일한 시스템이 아닌 경우 f-render 설치하지 않고 vue-ele-form 직접 사용할 수 있습니다.

 < 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-form 문서에 따라 커스텀 컴포넌트를 생성하고 등록해야 합니다.

구성 작성

다음은 소스 코드에서 구성을 참조할 수 있습니다. 예와 속성 설명은 다음과 같습니다.

 // 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 추가하지 않도록 주의하세요. 그렇지 않으면 재정의가 성공하지 못합니다.

2차 개발

属性및样式커스터마이징만으로는 귀하와 제품 관리자의 요구 사항을 충족할 수 없다면 맞춤형 개발이 필요합니다. 개인적으로 전체 코드는 매우 간단하다고 생각합니다. 코드를 clone 하거나 다운로드할 수 있습니다(사용하는 것이 좋습니다). gitee)에 따라 해당 변경을 수행합니다. 변경 사항을 처리하는 방법에는 두 가지가 있습니다.

• 프로젝트 디렉터리에 직접 넣고 개발을 위해 설치 dependencies 프로젝트에 복사합니다.
• 직접 개발한 후 회사의 비공개 서버에 게시할 수 있으며, 오픈소스인 경우 GitHub나 gitee로 전송한 후 직접 설치할 수도 있습니다.

구체적인 내용은 처음에 언급한 튜토리얼에 자세한 과정이 있으니 지원해 주시면 좋겠습니다.

f-render Q&A 컬렉션

• 1. f-렌더링으로 할 수 없는 작업은 무엇인가요?
• 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 ,
  // ....
} , 

슬롯

• 왼쪽: 왼쪽 구성 요소 목록
• 메인: 중간 영역
• main-header: 헤더 작업 영역
• 주요 내용: 양식 디자인 영역
• right: 오른쪽 속성 구성 영역

예:

 < 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-렌더링		vue-ele-form을 위해 특별히 개발된 시각적 양식 디자인 도구
vue-ele-form-json-편집기		JSON 편집기(vue-ele-form 확장)
vue-ele-양식-업로드-파일		파일 업로드 구성 요소 업로드(vue-ele-form 확장)
vue-ele-form-이미지-업로더		이미지 향상 구성 요소 업로드(vue-ele-form 확장)
vue-ele-form-tree-선택		트리 선택 상자 구성 요소(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		Baidu 지도 구성 요소(vue-ele-form 확장)
vue-ele-form-codemirror		코드 편집기(vue-ele-form-gallery 확장)
vue-ele-form-갤러리		이미지/비디오 표시 구성 요소(vue-ele-form 확장)
vue-ele-form-data-editor		경량 데이터 편집기(vue-ele-form 확장)

후원자님께 특별히 감사드립니다.

우수한 고객 서비스	성지에 위안추앙	데이먼니	xzusoft	씨엔터	고음

도움이 된다고 생각하시면 저자에게 커피 한 잔을 사서 오픈 소스를 더욱 발전시키실 수 있습니다. 클릭하여 코드 클라우드에 들어가 감상하시고, 아래 커뮤니케이션 그룹에 가입하신 후 링크를 ​​보내주세요.

기여자

멋진 분들에게 감사드립니다(이모지 키):

장 차오지에 ?

위센

이와나베싸트가이

이 프로젝트는 모든 기여자 사양을 따릅니다. 어떤 종류의 기여도 환영합니다!