Vue-如何添加自定义指令，类定义为"export-default"

Question

查看自定义指令的文档：https://v2.vuejs.org/v2/guide/custom-directive.html

给出了以下示例：

Vue.directive('pin', {
bind: function (el, binding, vnode) {
el.style.position = 'fixed'
var s = (binding.arg == 'left' ? 'left' : 'top')
el.style[s] = binding.value + 'px'
}
})
new Vue({
el: '#dynamicexample',
data: function () {
return {
direction: 'left'
}
}
})

然而，我的类是用不同的语法构建的：

export default {
name: 'dynamicexample',

换句话说，我没有使用示例中提供的new Vue关键字。

我在哪里以及如何在代码中添加指令，使其发挥作用？

如果我只是把Vue.directive粘贴到export default { name: 'dynamicexample',上面，它就不起作用。这只会导致应用程序在没有任何警告或错误的情况下失败。

Answer 1

new Vue({
el: '#demo',
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<input type="text" v-focus />
</div>

您可以尝试创建js文件：

export const MyDirective {
name: 'dynamicexample',
/* your code */
}

然后，在您使用它的模板中：

import MyDirective from './directives/MyDirective.js';
export default {
directives: {
MyDirective
}
/* ... */
}

你也可以使用

Vue.directive('my-directive', MyDirective)

在全球范围内进行申报。