vue.js - 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>

Autosize 是一个应该使文本区域增长的插件，当然，当我测试添加更多文本时什么也没有发生。但似乎它不是自动调整大小无法工作，但也许我错过了一些东西，甚至这些都没有被打印:

console.log('autosize bind')

console.log('autosize update')

当我动态创建组件时。

有人知道我错过了什么，以致该指令没有绑定(bind)或更新吗？

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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9d8cccdd6cad0c3dcf98d97899789" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6c0c3d3f68498829884" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
<div id="app">
  Paste a large amount of text:
  <hr>
  <autosize></autosize>
</div>

但是，如果您确实想使用指令，正如我在对您的问题的评论中提到的那样，el 是指令钩子(Hook)的参数。这是一个工作指令。

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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="69081c1d061a00130c295d47594759" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5422213114667a607a66" rel="noreferrer noopener nofollow">[email protected]</a>"></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) }
}