Vue implémente des formulaires personnalisés visuels par glisser-déposer (exemple de code)

Ce que cet article vous apporte concerne l'implémentation de formulaires visuels personnalisés par glisser-déposer (exemples de code) dans Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. toi.

Implémentez la fonction de formulaire visuel glisser-déposer comme indiqué dans l'exemple. La page entière est divisée en trois colonnes : gauche, milieu et droite. Les composants (composants) de la bibliothèque de composants dans la colonne de gauche sont utilisés comme clés lors du glisser-déposer dans la zone centrale, les données du tableau sont stockées dans vuex, et on est poussé après en avoir traîné un. Lorsqu'on clique sur un composant, ses propriétés sont affichées dans la colonne de droite. En fait, il s'agit de retrouver les propriétés d'itération des données dans les données stockées dans vuex.

Trois colonnes à gauche, au milieu et à droite, gauche et droite fixes, disposition adaptative au milieu

Tout d'abord, en termes de disposition, la gauche et la droite sont extensibles, et la le milieu est une mise en page adaptative.

Flottez respectivement à gauche et à droite, utilisez la marge pour ouvrir la colonne du milieu afin de terminer la mise en page

Zoomez dynamiquement la fenêtre du navigateur pour voir l'effet

Modèle d'affichage dynamique

Le deuxième point important est de rendre le modèle programmable.
Par exemple : si une chaîne button étiquette de ficelle ? Tissu de laine.

Points clés : Utiliser js et vue extends

Créer un nouveau 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'
            }
          }
    }))
  },
})

Opération glisser-déposer et assemblage de données

A été analysé au début de l'article Désormais, toute la direction du flux de données est implémentée à l'aide de vuex.

Le composant glisser-déposer utilise vuedraggable. Lorsque le glisser-déposer est terminé, compte tenu des caractéristiques de MVVM, l'écran change <=> les données changent lors de l'utilisation de vuex, veillez à ne pas modifier. l'état directement

computed: {
    myList: {
        get() {
            return this.$store.state.myList
        },
        set(value) {
            this.$store.commit('updateList', value)
        }
    }
}

Toute la direction du flux de données : bibliothèque de composants de la colonne de gauche<--> colonne d'affichage du milieu<----> Paramètres de propriété de la colonne de droite. les données originales peuvent être modifiées. Veuillez consulter :

var a = { k: 1 }
var b = a
b.k = 2
console.log(a) // { k: 2 }

Cela 无意间 entraînera une modification des données, ce qui est difficile 排查. Vous pouvez utiliser Object.freeze pour geler des objets afin d'éviter les erreurs.

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);
}

Cet article est par ici Pour un contenu plus passionnant, vous pouvez prêter attention à la colonne Vidéo du didacticiel JavaScript du site Web PHP chinois. !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!