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是一个插件，应该让textarea成长，当我测试添加更多文本时，没有任何事情发生。但它似乎不是自动调整无法工作，但也许我已经错过了一些东西，甚至没有打印出来：

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

vuejs自定义指令似乎没有注册

1 个答案: