Vue.js Vue自定义指令未注册

我正在尝试在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>

从“../shared/pin指令”导入{pinDirective}；
//这里有一些代码
指令：{pin:pinDirective}，
出售！

但它似乎并没有在跨度元素上应用这些样式。 即使它不记录控制台。

尝试更改此行

从“../shared/pin指令”导入{pinDirective}

对此

从“../shared/pin directive”导入pinDirective