ドラッグアンドドロップでVueユーザーインターフェースを生成する方法

<!--src/components/Designers/View/VueVisualDesigner.vue-->
<grid-layout ref="gridLayout" class="editorCanvas" :layout.sync="レイアウト"
        :col-num="レイアウトオプションのcolNum" :row-height="レイアウトオプションのrowHeight"
        :is-draggable="!preview" :is-resizable="!preview" @dragover.native="onDragOverGrid">
 <grid-item class="widgetPanel" v-for="レイアウト内のアイテム" :x="item.x" :y="item.y" :w="item.w"
    :h="item.h" :i="item.i" :key="item.i"
    @resize="onItemResize(item)" @container-resized="onItemResize(item)">
  <div v-if="!preview" class="widgetOverlay" @click="onSelectWidget(item)"></div>
  <!-- 動的ウィジェット -->
  <コンポーネント:ref="item.i":is="item.c":style="makeWidgetStyle(item)"
     v-model="runState[item.m]" v-bind="item.p" v-on="item.a">
   {{item.t}}
  </コンポーネント>
 </グリッドアイテム>
</グリッドレイアウト>

//src/runtime/IVueVisual.ts
エクスポートインターフェースIVueLayoutItem{
 /** コンポーネント名 例: Input */
 n: 文字列;
 /** v-テキスト */
 t?: 文字列;
 /** v モデル */
 m?: 文字列;
 /** コンポーネントプロパティ 例: {size: 'mini'} */
 p: オブジェクト;
 /** コンポーネントにバインドされたプロパティ、例: {data:':data'} */
 b?: オブジェクト;
 /** デザインタイムイベント定義、例: {click: {IVueEventAction}} */
 e?: オブジェクト;
 /** 実行時に生成されるイベント ハンドラー。v-on バインディングに使用されます (例: {click: function(){...}}) */
 a?: オブジェクト;
 /** Vue コンポーネントは実行時に動的にロードされます*/
 c?: 任意;
}

/** グリッドベースのレイアウト項目*/
エクスポートインターフェースIVueGridLayoutItemはIVueLayoutItemを拡張します{
 i: 文字列;
 x: 数値;
 y: 数値;
 w: 数値;
 h: 数値;
}

/** デザイン時のビューステート項目 */
エクスポートインターフェースIVueState{
 名前: 文字列;
 タイプ: 文字列;
 /**ステータス値を設定する操作。例: サービスを呼び出した後にステータス値を設定する*/
 値: IVueEventAction;
}

エクスポート タイプ EventAction = 'LoadData' | 'PostData' | 'RunScript';

エクスポートインターフェースIVueEventAction {
 /** 操作タイプ、例: LoadData */
 読み取り専用タイプ: EventAction;
}

エクスポートインターフェースIVueLoadDataActionはIVueEventActionを拡張します{
 /** 状態ターゲット 例: State = LoadService() */
 状態: 文字列;
 サービス: 文字列; //バックエンドサービス: 例: sys.OrderService.listAll
 ServiceArgs: any[]; //例: [{Name:'arg1', Type:'string', Value:'"rick"'}], Value は式です}

//カスタムウィジェット構成定義 {
 "Name": "Table", //コンポーネント名 "Component": "sys.ExTable", //カスタム ビュー モデルまたはグローバル コンポーネント名を指します (例: ElInput)
 "Icon": "fa fa-table", //ツールボックスアイコン "Width": 12, //デフォルトのグリッド幅 "Height": 6, //デフォルトのグリッド高さ "Props": [ //コンポーネントのプロパティ
 {
  "名前": "列",
  「タイプ」：「配列」、
  "デフォルト"： []、
  "Editor": "sys.ExTableColumnEditor" //カスタム属性エディターを指します},
 {
  "名前": "行",
  「タイプ」：「配列」、
  "デフォルト"： []
 }
 ]
}