davidnotplay / vue-my-dropdown

Dropdown box component to vuejs

Vue my dropdown component

Handle dropdown menu easily with this Vuejs component.

Requisites

Vuejs >= 2.x

Install

$ npm install vue-my-dropdown

Usage

You can import and insert the component using:

import dropdown from 'vue-my-dropdown'

// Component
export default {
    //...
    components: { dropdown },
    //...
}

Documentation

Official documentation

Changelog

2.1.0

• Fixed error in IE <= 11.
• Added positioned event.
• Changed .babelrc configuration. Now use env preset

LICENSE

The license is MIT. See LICENSE file to more info.

vue-my-dropdown's Issues

Dropdown isnt showing correctly

Hello, tried the lib and everything seems ok except the css.

Thats how the dropdown looks.

The code: (pretty straightforward copy of an example)

<dropdown :visible="visible" @clickOut="visible = false">
  <span class="cont-nav-img" @click="visible = true"><i class="icon-sprites icon-sprites-profile-icon"></i><span class="nav-label"><p>MI PERFIL</p></span></span>
  <div slot="dropdown" class="dialog">
    <aside class="menu">
      <ul class="menu-list">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
      </ul>
    </aside>
  </div>
</dropdown>

Clickout Does Not Work on Mobile

Currently mobile is not supported.

Adding transition delay animation

I want to add transition-delay CSS animation property for the dropdown dialog. However, since the CSS styles for dialog are being set by the props, I am unable to set this. I also tries adding this to '.my--dropdown-dd' class, but it is not working. It is very important for me to achieve this effect. Any suggestions is appreciated.

Property or method "visible" is not defined error

Trying to run an example:

<dropdown :visible="visible" @clickOut="visible = false"> 
<span class="link" @click="visible = true">Click me</span>
<div class="dialog" slot="dropdown">Click out to hide me.</div>
</dropdown>

getting the following error:

"[Vue warn]: Property or method "visible" is not defined",

followed by:

"vue.runtime.esm.js?a427:475 [Vue warn]: Invalid prop: type check failed for prop "visible". Expected Boolean, got Undefined."

How can I make a Vue with multi dropdowns?

I have a file .vue and I want to use multi dropdowns in it but I dont know ways to do. Please help me. Thansk

Incorrect docs/animation

Its listed as; :animation="animation", however it should be :animation="ani-none'" does not work an error is thrown, but :animation="'ani-none'", with single quotes does.

Typo in Docs/guide

Thanks for the plugin, works as expected 🍻

For the basic example you have;

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

Your missing the opening <dropdown>.

I checked to see if I could contribute, but seems the docs are not open sourced, might want to put them on GitHub. Others can contribute, also that would resolve issue #4 as well (considering there would be a code for having the component work when there are multiple drop downs being used).

Vue 2.0 support

Is this component compatible with Vue2 or do you have any plans for it?

Dynamically Calculate "Set Position"

Is calculating the "set position" based on the browser window outside the scope of which you want the plugin to handle?

npm invalid version warnings - parseError unexpexted token before <tempate>

Hi, i'd like to use your component in my project. but on install i get all these npm warnings "invalid version" ie. for "https://registry.npmjs.org/lodash/-/lodash-4.16.6.tgz"
i am using gulp to rebundle/live reload my project but i keep getting a parseError on line 1 in your component.

/node_modules/vue-my-dropdown/src/vue-my-dropdown.vue:1 <template> ^ ParseError: Unexpected token

any ideas?

You have error in documentation

There is error In your example with '@clickout="visible = false"'

You write 'clickOut', but event name is 'clickout'.

I saw this in the source code.

Thank's for dropdown!

Can't use multi instance

How can I use a multi-instance of this component on the same page?

dropdown should not been displayed outside the container

Dropdown progressively moving when used with absolute positioning

I have a strange issue with a dropdown positioned on a button that is itself absolutely position top-right.

Code: (some details removed for brevity)

<div class="absolute pin-t pin-r">
    <button @click.stop="actionsOpen = !actionsOpen"><icon/></button>
    <vue-my-dropdown :visible="actionsOpen"  :position="[ 'left', 'top', 'right', 'top' ]"/>
</div>

.pin-r {
    right: 0;
}
.pin-t {
    top: 0;
}
.absolute {
    position: absolute;
}

Every time I open the drop-down, it moves over a little bit, until finally it assumes its correct position (:position="[ 'left', 'top', 'right', 'top' ]").

The button: (dots at the top-right)

After first click:

After second click: (ignore the $t tooltip) (note the width change also)

All subsequent clicks: (correct)

Any idea what could be going on?

clickOut event is not working

I'm using your component with vuejs 2.3.4 and the click out event isn't working. The event is emitted but it's not handled by my funtion or whatever i put inside the listener.

I've tried @clickout, @click-out and @clickout, but none of them work.

Dropdown positioning issue

The dropdown is not positioning properly and is behaving differently in different scenarios. The problem lies in the calculation of 'top' and 'left' properties of the div with class 'my-dropdown-dd'. Negating these two properties in the console seems to be doing the trick. Therefore, I think the solution lies in JS rather than CSS, particularly within the function 'setPosition'.

But I don't know how to override this function or the parameters it is setting from my side. Any help would be greatly appreciated.

.remove() method does not valid for all browsers

I got the error on IE. Could you fix it?

https://stackoverflow.com/questions/18919560/object-doesnt-support-property-or-method-remove

Positioning in relation to a fixed position element is broken.

Hey, first off, the relevant code:

the HTML

<div  class='foliage-actionbuttons'>
        <div class='foliage-actionbutton' @click.prevent="showDropdown('dropdown11')" id="link11"><i class="fa fa-user" aria-hidden="true"></i>
        </div>
        <div class='foliage-actionbutton last'><i class="fa fa-sign-out" aria-hidden="true"></i></div>
        <my-dropdown id="dropdown11" click-out="" ref-id="link11" :position="['left', 'top', 'right', 'bottom']">
            <div class="dropdown">Click again in the link to hide me.</div>
        </my-dropdown>
    </div>

And the position styling for the parent foliage-actionbuttons div.

.foliage-actionbuttons {
    height: 32px;
    line-height: 32px;
    display: inline-block;
    position: fixed;
    right: 15px;
    bottom: 15px;
}

What I expect is the positioning to be always correct, as your examples demonstrate. Instead, Here's a gif, of how the positioning of the element changes with a few toggles....

As you can see, it goes all over the place, before setting for what's expected at the end.

Open on mouseover doesn't work as expected

Your example with custom event @mouseover="visible = true" shows the dropdown menu but when you try to hover over the menu item it disappears.

So how would i need to make it to work with a navigation menu not a dialog?