使用服装指令在剃刀页面中调用Vue模态组件

Question

我试图构建一个可重用的Vuejs模态组件，并在剃须刀页面上的按钮click事件上打开此模态（因为我们无法直接在剃须刀页面上调用click事件，因此我为此创建了一个自定义指令。

下面是我的代码：

PopupModal.vue：

    <template>
    <Transition name="fade">
    <div v-if="showing" class="modal fixed inset-0 w-full h-screen flex items-center justify-center bg-semi-75" @click.self="close">
        <div class="w-full max-w-2xl bg-white shadow-lg rounded-lg p-8">
            <button aria-label="close"
                    class="top-0 right-0 text-xl text-gray-500 my-2 mx-4"
                    @click.prevent="close">
                x
            </button>
            <slot />
            <button>
                Close
            </button>
        </div>
    </div>
    </Transition>
</template>

<script>
    export default {
        name: 'PopupModal',
        data: {
            exampleModalShowing: false,
        },
        props: {
            showing: {
                required: true,
                type: Boolean
            }
        },
        methods: {
            close() {
                this.$emit('close');
            }
        }
    };

</script>

buymodal.js指令：

const VueBuymodal = {
    inserted: function (el, binding, vnode) {
        const auctionNumber = binding.value;
        const connectUrl = function (evt) {
//For now trying something simple
console.log("auctionNumber");   


            evt.preventDefault();
        }
        el.addEventListener('click', connectUrl);
    }
}

export default VueBuymodal;

我的剃须刀页面：

->将模式调用为：

<a v-buymodal="exampleModalShowing = true">

->在同一剃刀页面上渲染模态，如下所示：

<popup-modal :showing="exampleModalShowing">
            <h2 class="text-xl font-bold text-gray-900">Buy Now</h2>
            <p>This is example text passed through to the modal via a slot.</p>
            <button class="bg-blue-600 text-white px-4 py-2 text-sm uppercase tracking-wide font-bold rounded-lg">
                Close
            </button>
        </popup-modal>

错误：我遇到以下错误： [Vue警告]：无法解析指令：buymodal