ホームページ > 記事 > ウェブフロントエンド > Vue は視覚的なドラッグ アンド ドロップ カスタム フォームを実装します (コード例)
この記事で紹介するのは、Vue での視覚的なドラッグ アンド ドロップ カスタム フォーム (コード例) の実装についてです。これには一定の参考価値があります。必要な友人は参照できます。役立つことを願っています。あなた。
例に示すように、視覚的なドラッグ アンド ドロップ フォーム関数を実装します。ページ全体が左・中・右の3列に分かれており、左列のコンポーネントライブラリのコンポーネント(コンポーネント)がキーとなり、中央の領域にドラッグ&ドロップするとvuexに配列データが格納され、 1 つをドラッグした後、1 つを押します。コンポーネントをクリックすると、そのプロパティが右側の列に表示されますが、実際には、vuex に保存されているデータ内のデータ反復プロパティを見つけるためのものです。
左、中、右の 3 列、左と右は固定、中央はアダプティブ レイアウト
まず、レイアウトの観点から、左右を拡張できます。 、中央はアダプティブレイアウトです。
それぞれ左にフロート、右にフロートし、マージンを使用して中央の列を開いてレイアウトを完成させます
ブラウザ ウィンドウを動的にズームして効果を確認します
動的表示テンプレート
2 番目の重要な点は、テンプレートをプログラム可能にすることです。
例: 文字列
重要なポイント: js と vue extends の使用
新しい js
export default Vue.component('CustomTemplate', { props: { html: String }, render (h) { return h(Vue.extend({ // 关键点 template: `<div class="root-custom-template">${this.html}</div>`, data () { return { current: '' } }, methods: { doclick (uuid, id) { this.current = uuid this.$store.commit('EditPanel/changeId', uuid) }, dodragstart (ev) { ev.dropEffect = 'move' } } })) }, })
ドラッグ アンド ドロップ操作とデータのアセンブリ
次のステップは、vuex を使用してデータ フロー全体を実装することです。
ドラッグ&ドロップコンポーネントはvuedraggableを使用しています。MVVMの特性上、ドラッグ&ドロップが完了すると画面が変化します<=>データが変化します。vuexを操作する際は、直接操作しないように注意してください。状態を変更します
computed: { myList: { get() { return this.$store.state.myList }, set(value) { this.$store.commit('updateList', value) } } }
データ全体の流れの方向: 左列のコンポーネント ライブラリ<--> 中央の表示列<----> 右列のプロパティ設定。データが適切に制御されていない場合、元の列データは変更される可能性があります。
var a = { k: 1 } var b = a b.k = 2 console.log(a) // { k: 2 }
これにより、意図せず
データが変更されてしまい、トラブルシューティングが困難になります。
Object.freeze を使用してオブジェクトをフリーズし、エラーを回避できます。
function deepFreeze(obj) { // 取回定义在obj上的属性名 var propNames = Object.getOwnPropertyNames(obj); // 在冻结自身之前冻结属性 propNames.forEach(function(name) { var prop = obj[name]; // 如果prop是个对象,冻结它 if (typeof prop == 'object' && prop !== null) deepFreeze(prop); }); // 冻结自身(no-op if already frozen) return Object.freeze(obj); }この記事はここで終了しました。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの
JavaScript チュートリアル ビデオ 列に注目してください。
以上がVue は視覚的なドラッグ アンド ドロップ カスタム フォームを実装します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。