vuejs benutzerdefinierte Richtlinie scheint nicht

Question

zu registrieren

ich benutzerdefinierte Richtlinie bin Gebäude wird

autosize.js in einer eigenen Datei gespeichert, und es sieht wie folgt aus:

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

Ich benutze es in Dateikomponente und importieren sie es wie folgt aus:

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

registrieren es wie folgt aus:

 directives: { 
      Autosize 
     } 

In meiner Dateikomponente ich versuche es so zu verwenden:

<textarea v-autosize="input" :value="input" @input="update" class="form-control">{{input}}</textarea> 

automatisch anpassen ein Plugin ist, das machen TextArea- wachsen sollte, natürlich nichts passiert, wenn ich teste, mehr Text addieren. Aber es scheint, dass es nicht autosize, dass nicht funktioniert, aber vielleicht habe ich etwas verpasst, nicht einmal diese erhalten gedruckt:

console.log('autosize bind') 

console.log('autosize update') 

, wenn ich die Komponente dynamisch erstellen.

Jeder hat eine Idee, was ich verpasst habe, so dass die Richtlinie nicht bindend ist oder aktualisiert?

Answer 1

Normalerweise werden Bibliotheken wie diese mit einer Wrapper-Komponente in Vue 2 umschlossen. Hier ist ein Beispiel für eine autosize Komponente.

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

Hier ist ein funktionierendes Beispiel.

console.clear() 
 

 
const AutoSize = { 
 
    props:["value"], 
 
    template: `<textarea v-model="internalValue"></textarea>`, 
 
    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} 
 
})

<script src="https://unpkg.com/autosize@4.0.0"></script> 
 
<script src="https://unpkg.com/vue@2.4.2"></script> 
 
<div id="app"> 
 
    Paste a large amount of text: 
 
    <hr> 
 
    <autosize></autosize> 
 
</div>

Aber wenn Sie wirklich eine Richtlinie, wie ich bereits erwähnt in meinem Kommentar zu Ihrer Frage, el ist ein Parameter, die Richtlinie Haken verwenden wollen. Hier ist eine Arbeitsanweisung.

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", 
 
})

<script src="https://unpkg.com/autosize@4.0.0"></script> 
 
<script src="https://unpkg.com/vue@2.4.2"></script> 
 
<div id="app"> 
 
    Paste a large amount of text: 
 
    <hr> 
 
    <textarea v-autosize cols="30" rows="10"></textarea> 
 
</div>

Wenn Sie diese Richtlinie aufgenommen, wie in Ihrer components/directives/autosize.js Datei, ohne sie zu exportieren, würde ich erwarten, dass es global, weil Vue.directive Register Richtlinien zu arbeiten. Wenn Sie wollte es vor Ort einschreiben dann sollte die Datei wie folgt aussehen:

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