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