vuejs定製指令似乎沒有註冊

Question

我建立自定義的指令，它存儲在它自己的文件

autosize.js，它看起來像這樣：

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

我使用它的文件組件內部並導入這樣的：

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

註冊這樣的：

 directives: { 
      Autosize 
     } 

在我的文件組件我嘗試使用這樣的：

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

自動調整是應該使textarea的成長插件，當我測試增加更多的文字ofcourse沒有任何反應。但是似乎它不自動調整失敗的工作，但也許我錯過了一些東西，甚至沒有這些得到印刷：

console.log('autosize bind') 

console.log('autosize update') 

當我動態創建的組件。

任何人都有一個想法，我已經錯過了，使指令沒有約束力或更新？

Answer 1

您通常用Vue 2中的包裝器組件包裝這樣的庫。下面是一個示例autosize組件。

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

這是一個工作示例。

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>

但如果你真的想用一個指令，正如我在你的問題發表評論時提及，el是該指令掛鉤的參數。這是一個工作指令。

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>

如果包括了該指令，因爲在你的components/directives/autosize.js文件，而不導出，我希望它在全球範圍內的工作，因爲Vue.directive寄存器指令。如果您想向本地註冊它，則文件應該是這樣的：

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