Vue を使用してローコード開発プラットフォームを実装するにはどうすればよいですか?

序文

数ある開発技術の中でも、柔軟性と効率性に優れたVueコンポーネント開発技術が注目を集めています。

ローコードプラットフォームは多くの人がその存在を知っていると考えられており、現在ほとんどの企業が独自のローコードプラットフォームを開発しています。まず、ローコードプラットフォームのビジュアルインターフェイスを見てみましょう。

公式サイト： https://www.jnpfsoft.com/?csdn 、興味があればぜひ試してみてください。

ほとんどのページデザイナーにはいくつかの領域が含まれていることがわかります。左側はコンポーネント、中央はキャンバス、右側はプロパティ構成領域です。次に、フォームページを形成するためのドラッグがどのように実現されるかを分析しますが、ここでは CSS レイアウトを検討するのではなく、直接どのように実現されるかを分析します。

1. 分析

まず考えてみましょう。左側のコンポーネントリストから目的のコンポーネントを中央のキャンバスにドラッグし、予想されるページを形成します。キャンバス上のコンポーネントをクリックすると、プロパティ設定が表示されます。現在のコンポーネントの領域 (各コンポーネントには固有の属性領域があります) を選択し、右側の属性値を変更すると、ページがそれに応じて変更されます。これは具体的にどのようにして実現されたのでしょうか?

実際、これは json を通じて実現できます。コンポーネントを記述する json を事前に定義します。json には、現在のコンポーネントデータと現在のコンポーネントのスタイル属性データなどが含まれており、コンポーネントジェネレーターは、コンポーネントを記述する json を結合します。実際のコンポーネントをレンダリングするためのコンポーネント。style 属性が変更されると、コンポーネントのスタイルは同期的に更新されます。例として入力コンポーネントを取り上げます。その大まかな json は次のとおりです。

json:{
  fieldId: '',
  name: 'Input',
  label: '单行文本',
  icon:"input01"
  placeholder: '请输入',
  value: '',
  rules: {},
  makeStyle: { //制作表单的时候，页面的样式控制
    active: false
  },
  style: {}, // 组件的样式
  setting: {}, // 组件的其他属性设置，比如：rows: 2
}

コンポーネントを json で記述する必要があることがわかったので、次に正式な開発を開始します。

2. コンポーネントリスト

左側のコンポーネントリストは比較的単純です。つまり、すべてのコンポーネントの json を配列に入れ、ページ上でそれを走査します。

//components  组件列表
 <div
      v-for="(item, index) in components"
      :key="index"
    >
      <i class="iconfont" :class="item.icon"></i>//图标
      <span>{
    
    { item.label }}</span>//列表显示的名字
    </div>

3. ドラッグアンドドロップビルドパネルを開発する

コンポーネントのドラッグアンドドロップここでは vedraggable プラグインを使用します。関連する API については、公式 Web サイトのドキュメントをご確認ください。ここでは詳しく説明しません。

コンポーネントエリア

  <!--组件列表改进，外层包裹draggable标签 -->
  <draggable
    v-model="components"          // 拖拽列表数据源
    :options="{ 
      group:{ 
              name: 'itxst',   // 可拖拽列组，相同表名可相互推拽
              pull: 'clone'    // 拖拽模板物料，复制到目标列表
            }, 
            sort: false        // 是否可推拽排序
    }"  
    :clone="handleClone"       // 复制模板物料执行方法 ，比如克隆元素并产生全局唯一的fieldId
    animation="300"            // 动画延迟
  >
    <div
      v-for="(item, index) in components"
      :key="index"
    >
      <i class="iconfont" :class="item.icon"></i>
      <span>{
    
    { item.label }}</span>
    </div>
  </draggable>


  //克隆的方法
  handleClone(obj) {
      const newObj = Object.assign(_.cloneDeep(obj), {
        fieldId: `${obj.name}_${new Date().getTime()}`,
      })
      return newObj
  }

ページ

  <!-- 画布区域 -->
  <draggable
    v-model="list2"         // 拖拽列表数据源
    group="itxst"           // 可拖拽列组，相同表名可相互推拽
    ghostClass="ghost"      // 拖动元素的占位样式class
    chosenClass="chosen"    // 选中目标的样式class
    selector="selector"
    :animation="500"        // 动画延迟
    :sort="true"            // 是否可推拽排序
  >
    <component
      v-for="item in mList"
      :key="item.id"
      :is="item.name"
      v-bind="item"
    ></component>
  </draggable>

list2 はキャンバス内のコンポーネント json の配列です。<component> タグは対応するコンポーネントをレンダリングするために使用され、次のステップは属性設定領域です。

4. プロパティ設定エリア

属性構成領域には、実際にはコンポーネントごとに異なる構成コンポーネントが表示され、実際にはコンポーネントです。キャンバス領域でコンポーネントをクリックすると、構成領域にそのプロパティと値が表示され、値を変更すると、それに応じてページも変更されます。

5. コンポーネントの削除とコピー

実際、コンポーネントの削除は非常に簡単です。前のドラッグによって形成された一意の fieldId を覚えておいてください。[削除] をクリックしてコンポーネント配列内の fieldId を取得し、配列内の対応するコンポーネント json を削除します。同様に、コピーする場合、現在の fieldId に対応するコンポーネントの後ろにデータが挿入されます。コピーすると一意の fieldId も生成されることに注意してください。

6. 追記

ここまでは基本的にドラッグアンドドロップを実装しました。よく考えてみてください。実際、ローコードプラットフォームは常に同じであり、すべて json ベースです。後は、ネストされたコンポーネントの実装方法とコンポーネント間の通信方法です。コードはオープンソースになる予定で、誰もが記事内のアイデアを比較して自分で考えることができるように、簡単なデモを作成します。

Vue ローコードプラットフォームをゼロから実現する - Zhihu (zhihu.com)