ng form element

ng-form は、最も強力なオープンソース Vue 動的フォーム コンポーネントの作成に取り組んでいます。

NG形式要素

説明するバージョン 2.1.0 以降、国際化がサポートされ、簡体字中国語と英語の 2 つの言語が組み込まれています。

オンラインの例

https://jjxliu306.github.io/ng-form-element/dist/index.html

iview バージョンアドレスhttps://gitee.com/jjxliu306/ng-form-iview

element-plus版（VUE3版）アドレスhttps://gitee.com/jjxliu306/ng-form-elementplus

バックエンドサービス

ngtool バックエンド解析および検証機能https://gitee.com/jjxliu306/ngtool

ドキュメント (継続的に更新)

http://www.ng-form.cn

##モバイル端末の例uniapp ng-form コンポーネントhttps://ext.dcloud.net.cn/plugin?id=20207

統合例

springboot + vue に基づくフロントエンドとバックエンドの分離統合ケース

バックエンドのスプリングブート: https://gitee.com/jjxliu306/ng-server

フロントエンドビュー: https://gitee.com/jjxliu306/ng-ui

例

基本形

フォーム検証とコンポーネントの動的表示

動的テーブル

導入

vue と element-ui をベースにしたフォームデザイナー。ドラッグ アンド ドロップでフォーム ページをすばやく生成でき、フォームを json 形式にエクスポートしたり、他の人が描画したフォームを json インポートを通じて復元したりできます。

他のオープンソースフォームとの違い

• 各コンポーネントは動的に非表示および表示することができ、「必須」に加えてさまざまなルール検証を提供し、式検証や定期検証をサポートします。
• 非表示のコンポーネントバインディング値を出力しないように設定でき、出力データサイズを削減できます
• 選択コントロール (ラジオ、選択、チェックボックス) の選択後のトリガー呼び出しを提供し、式をサポートします。多段階連携が可能な選択制御のデータ連携機能をサポート
• 動的フォームには、入力および編集用の個別のポップアップ ボックスが用意されています。
• グリッド、テーブルなどのレイアウト方法を提供し、多様なレイアウト方法を提供
• フォーム プレビュー モードをサポートし、すべてのフォーム コンテンツはコンポーネント化されておらず、すべてのテキストが表示されます。
• 選択コントロール (ラジオ、選択、チェックボックス) を選択すると、対応するラベルが簡単に表示できるように個別に保存されます。

コンポーネント

• ng-form-design フォーム デザイナー (視覚的な操作に基づいてフォーム ページをすばやくデザインし、構成 JSON またはページを生成します)
• ng-form-b​​uild フォームビルダー (デザイナーで取得した構成 json データに基づいてフォーム ページを迅速に構築し、readonly 属性を追加してプレビュー フォームを表示します)

インストール

バージョン 2.2.0 以降の場合は、vue-cli3 以降のスキャフォールディングを使用してください。

 npm install --save  ng-form-element

引用

 // 导入组件库
import NgFormElement  from 'ng-form-element'
import 'ng-form-element/lib/ng-form-element.css'

登録する

 // 注册组件库
Vue.use(NgFormElement) 

参照ページ

 <div id="app"> 
    <ng-form-design  />
</div>

コミュニケーションする

リンクをクリックして QQ グループ チャットに参加し、直接質問したりバグを報告したりできます [コミュニケーション グループ: 152592057]