Vue は視覚的なドラッグ アンド ドロップ カスタム フォームを実装します (コード例)

この記事で紹介するのは、Vue での視覚的なドラッグ アンド ドロップ カスタム フォーム (コード例) の実装についてです。これには一定の参考価値があります。必要な友人は参照できます。役立つことを願っています。あなた。

例に示すように、視覚的なドラッグ アンド ドロップ フォーム関数を実装します。ページ全体が左・中・右の3列に分かれており、左列のコンポーネントライブラリのコンポーネント（コンポーネント）がキーとなり、中央の領域にドラッグ＆ドロップするとvuexに配列データが格納され、 1 つをドラッグした後、1 つを押します。コンポーネントをクリックすると、そのプロパティが右側の列に表示されますが、実際には、vuex に保存されているデータ内のデータ反復プロパティを見つけるためのものです。

左、中、右の 3 列、左と右は固定、中央はアダプティブ レイアウト

まず、レイアウトの観点から、左右を拡張できます。 、中央はアダプティブレイアウトです。

それぞれ左にフロート、右にフロートし、マージンを使用して中央の列を開いてレイアウトを完成させます

ブラウザ ウィンドウを動的にズームして効果を確認します

動的表示テンプレート

2 番目の重要な点は、テンプレートをプログラム可能にすることです。
例: 文字列 button が渡された場合、それをコンポーネントではなくコンポーネントとして表示する方法紐ラベル?毛織物。

重要なポイント: 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 を使用してオブジェクトをフリーズし、エラーを回避できます。

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 サイトの他の関連記事を参照してください。