Vue自定义指令不注册。

Question

我试图在vue中创建一个自定义指令，但不起作用。

我的pin-directive.js代码

export default {
  bind(el) {
    console.log('hi pin');
    el.style.position = 'absolute';
    el.style.bottom = '5px';
    el.style.right = '5px';
  },
  inserted(el) {
    console.log(el);
  },
};

现在，我在vue文件中使用如下所示：

import { pinDirective } from '../shared/pin-directive';
// some code here
directives: { pin: pinDirective },

<span  class="sale" v-if="selectedPart.onSale" v-pin>Sale!</span>

但是，它似乎没有将这些样式应用于span元素。甚至它也不记录控制台。

Answer 1

试着改变这一行

import { pinDirective } from '../shared/pin-directive';

为了这个..。

import pinDirective from '../shared/pin-directive';