Vue 3 как правильно подключить компонент?

Question

[Dmitry]

Подключаю vue-my-dropdown по инструкции.
app.js

import { createApp } from 'vue'
import dropdown from "./components/Dropdown";

const app = createApp({})

app.component('dropdown', dropdown)
app.mount('#app')

index.blade

<dropdown :visible="true">
   <span class="link" @click="visible = !visible">click here</span>
      <div slot="dropdown" class="dialog">
         hello world
      </div>
</dropdown>

После рендера html:

Но не работает, ошибок в devTools нет.

Vue 3, Laravel 8

Comments

[LJ322]

покажите, что у вас в /components/Dropdown лежит

[Dmitry]

LJ322,

<template>
  <span>
    <span><slot></slot></span>
    <transition :name="animation">
      <div :style="ddStyle" class="my-dropdown-dd" v-show="visible">
          <slot name="dropdown"></slot>
      </div>
    </transition>
  </span>
</template>

<script>

/**
 * Get the dimensions of `$ele` ele.
 * @param {HTMLElement} $ele
 * @return {object} Object with `width` and `height` properties.
 */
function getSize($ele) {
    let $clone = $ele.cloneNode(true)
    let size = {}

    $clone.style.display = 'block'
    $clone.style.visibility = 'hidden'
    $clone.style.position = 'absolute'
    $ele.parentNode.insertBefore($clone, $ele)
    size.width = $clone.offsetWidth
    size.height = $clone.offsetHeight
    $clone.remove()

    return size
}

/**
 * Set dropdown position.
 * @param {HTMLElement} $link - Html element will show the dropdown when it is pressed.
 * @param {HTMLElement} $dd - Dropdown html element.
 * @param {array} position - Dropdown position.
 */
function setPosition($link, $dd, position, margin) {
    let refSize = getSize($link)
    let cornerPos = {}
    let outStyle = {}
    let origin = {}
    let [ p1, p2, p3, p4 ] = position
    let rect = $link.getBoundingClientRect()
    let refPos = { top: 0, left: 0 }
    let dpSize = getSize($dd)
    let parentPosition = document.defaultView.getComputedStyle($link.offsetParent).position

    switch (parentPosition.toLowerCase()) {
        case 'fixed':
            refPos.left = rect.left - $link.offsetParent.offsetLeft
            refPos.top = rect.top - $link.offsetParent.offsetTop
            break

        case 'absolute':
            let parentRect = $link.offsetParent.getBoundingClientRect()
            refPos.left = rect.left - parentRect.left
            refPos.top = rect.top - parentRect.top
            break

        default:
            refPos.left = rect.left - $link.offsetParent.offsetLeft + window.pageXOffset
            refPos.top = rect.top - $link.offsetParent.offsetTop + window.pageYOffset
    }

    cornerPos.left = refPos.left
    switch (p1) {
        case 'center':
            cornerPos.left += refSize.width / 2
            break

        case 'right':
            cornerPos.left += refSize.width
            break
    }

    cornerPos.top = refPos.top
    switch (p2) {
        case 'center':
            cornerPos.top += refSize.height / 2
            break
        case 'bottom':
            cornerPos.top += refSize.height
            break
    }

    switch (p3) {
        case 'left':
            outStyle.left = Math.round(cornerPos.left)
            origin.left = 'left'
            break

        case 'center':
            outStyle.left = Math.round(cornerPos.left - dpSize.width / 2)
            origin.left = 'center'
            break

        default:
            outStyle.left = Math.round(cornerPos.left - dpSize.width)
            origin.left = 'right'
    }

    switch (p4) {
        case 'top':
            outStyle.top = Math.round(cornerPos.top)
            origin.top = 'top'
            break

        case 'center':
            outStyle.top = Math.round(cornerPos.top - dpSize.height / 2)
            origin.top = 'center'
            break

        default:
            outStyle.top = Math.round(cornerPos.top - dpSize.height)
            origin.top = 'bottom'
    }

    outStyle.left = (outStyle.left + margin[0]) + 'px'
    outStyle.top = (outStyle.top + margin[1]) + 'px'
    outStyle.transformOrigin = origin.left + ' ' + origin.top
    outStyle.position = 'absolute'
    return outStyle
}

const getWindow = () => window.document

export default {
    name: 'VueMyDropdown',

    data() {
        return {
            ddStyle: {}
        }
    },

    props: {
        // Dropdown visibility.
        visible: {
            required: true,
            type: Boolean
        },

        // Dropdown position.
        position: {
            required: false,
            type: Array,
            default: () => ['right', 'top', 'left', 'top']
        },

        // Dropdown animation.
        animation: {
            required: false,
            type: String,
            default: 'ani-slide'
        }
    },

    methods: {
        open() {
            this.setPosition()
            getWindow().addEventListener('resize', this.resizeEvent)
            setTimeout(() => getWindow().addEventListener('click', this.clickOutEvent), 10)
        },

        close() {
            getWindow().removeEventListener('resize', this.resizeEvent)
            getWindow().removeEventListener('click', this.clickOutEvent)
        },

        resizeEvent() {
            this.setPosition()
        },

        clickOutEvent(evt) {
            var $dd = this.$el.children[1]
            if (evt.target !== $dd && !$dd.contains(evt.target)) {
                this.$emit('clickout', evt)
            }
        },

        setPosition() {
            var $link = this.$el.children[0]
            var $dd = this.$el.children[1]
            this.ddStyle = setPosition($link, $dd, this.position, [0, 0])
            this.$emit('positioned', this.ddStyle)
        }
    },

    watch: {
        visible(isVisible) {
            if (isVisible) {
                this.open()
            } else {
                this.close()
            }
        }
    },

    mounted() {
        if (this.visible) {
            this.open()
        }
    },

    destroyed() {
        getWindow().removeEventListener('resize', this.resizeEvent)
        getWindow().removeEventListener('click', this.clickOutEvent)
    }
}
</script>

<style>

.my-dropdown-dd {
    position: absolute !important;
    box-sizing: border-box !important;
}

.ani-none-leave-active, .ani-none-leave, .ani-none-enter-active, .ani-none-enter{
    transition: none;
}

.ani-slide-leave-active {
    transition: transform .3s ease, opacity .3s ease;
    transform: scale(0, 0);
    opacity: 0;
}

.ani-slide-leave {
    transform: scale(1, 1);
    opacity: 1;
}

.ani-slide-enter-active {
    transition: transform .3s ease, opacity .3s ease;
    transform: scale(1, 1);
    opacity: 1;
}

.ani-slide-enter {
    transform: scale(0, 0);
    opacity: 0;
}


.ani-slide-x-leave-active {
    transition: transform .3s ease, opacity .3s ease;
    transform: scaleX(0);
    opacity: 0;
}


.ani-slide-x-leave {
    transform: scaleX(1);
    opacity: 1;
}


.ani-slide-x-enter-active {
    transition: transform .3s ease, opacity .3s ease;
    transform: scaleX(1);
    opacity: 1;
}


.ani-slide-x-enter {
    transform: scaleX(0);
    opacity: 0;
}


.ani-slide-y-leave-active {
    transition: transform .3s ease, opacity .3s ease;
    transform: scaleY(0);
    opacity: 0;
}


.ani-slide-y-leave {
    transform: scaleY(1);
    opacity: 1;
}


.ani-slide-y-enter-active {
    transition: transform .3s ease, opacity .3s ease;
    transform: scaleY(1);
    opacity: 1;
}


.ani-slide-y-enter {
    transform: scaleY(0);
    opacity: 0;
}


.ani-fade-leave-active {
    transition: transform .3s ease, opacity .3s ease;
    opacity: 0;
}


.ani-fade-leave {
    opacity: 1;
}


.ani-fade-enter-active {
    transition: transform .3s ease, opacity .3s ease;
    opacity: 1
}


.ani-fade-enter {
    opacity: 0
}
</style>

[LJ322]

Dmitry, ну так и что? У вас подключился ваш компонент в первозданном виде. В доке написано же, что нужно импортировать компонент из либы и добавить к себе в components: {}, а затем использовать в template. У вас он нигде не подключается