La directive personnalisée de vuejs ne semble pas s'enregistrer

Question

Je construis une directive personnalisée, elle est stockée dans son propre fichier

autosize.js et ressemble à ceci:

import Vue from 'vue'
import autosize from 'autosize'

Vue.directive('autosize', {
    bind: function() {
        console.log('autosize bind')
        var self = this
            Vue.nextTick(function() {
            autosize(self.el)
        })
    },

    update: function(value) {
        console.log('autosize update')
        var self = this
        Vue.nextTick(function() {
            self.el.value = value
            autosize.update(self.el)
        })
    },

    unbind: function() {
        autosize.destroy(this.el)
    }
})

Je l'utilise à l'intérieur du composant de fichier et l'importe ainsi:

import Autosize  from 'components/directives/autosize.js'

l'enregistrez ainsi:

directives: {
            Autosize
        }

À l'intérieur de mon composant de fichier, j'essaie de l'utiliser comme ceci :

{{input}}

Autosize est un plugin censé faire grandir la zone de texte, bien sûr rien ne se passe lorsque je teste en ajoutant plus de texte. Mais il semble que ce ne soit pas autosize qui ne fonctionne pas mais peut-être que j'ai oublié quelque chose, même ces lignes ne sont pas imprimées :

console.log('autosize bind')

console.log('autosize update')

lorsque je crée dynamiquement le composant.

Quelqu'un a une idée de ce que j'ai oublié pour que la directive ne se lie pas ou ne se mette pas à jour?

Answer 1

Vous enveloppez généralement des bibliothèques de cette façon avec un composant wrapper dans Vue 2. Voici un exemple de composant autosize.

const AutoSize = {
  props:["value"],
  template: ``,
  computed:{
    internalValue:{get(){return this.value}, set(v){this.$emit('input', v)}}
  },
  mounted(){ autosize(this.$el)},
  beforeDestroy(){ autosize.destroy(this.$el) }
}

Voici un exemple de travail.

console.clear()

const AutoSize = {
  props:["value"],
  template: ``,
  computed:{
    internalValue:{get(){return this.value}, set(v){this.$emit('input', v)}}
  },
  mounted(){ autosize(this.$el)},
  beforeDestroy(){ autosize.destroy(this.$el) }
}

new Vue({
  el: "#app",
  components:{autosize: AutoSize}
})

  Collez une grande quantité de texte :

Mais si vous vouliez vraiment utiliser une directive, comme je l'ai mentionné dans mon commentaire à votre question, el est un paramètre des crochets de directive. Voici une directive qui fonctionne.

Vue.directive("autosize", {
  bind(el){ autosize(el) },
  inserted(el) { autosize.update(el) },
  update(el){ autosize.update(el) },
  unbind(el){ autosize.destroy(el) }
})

console.clear()

Vue.directive("autosize", {
  bind(el){ autosize(el) },
  inserted(el) { autosize.update(el) },
  update(el){ autosize.update(el) },
  unbind(el){ autosize.destroy(el) }
})

new Vue({
  el: "#app",
})

  Collez une grande quantité de texte :

Si vous incluez cette directive telle quelle dans votre fichier components/directives/autosize.js sans l'exporter, je m'attendrais à ce qu'elle fonctionne car Vue.directive enregistre les directives globalement. Si vous vouliez l'enregistrer localement, alors le fichier devrait ressembler à ceci :

import Vue from 'vue'
import autosize from 'autosize'

export default {
  bind(el){ autosize(el) },
  inserted(el) { autosize.update(el) },
  update(el){ autosize.update(el) },
  unbind(el){ autosize.destroy(el) }
}