davidnotplay / vue-my-dropdown Goto Github PK
View Code? Open in Web Editor NEWDropdown box component to vuejs
Home Page: https://davidnotplay.github.io/vue-my-dropdown/
License: MIT License
Dropdown box component to vuejs
Home Page: https://davidnotplay.github.io/vue-my-dropdown/
License: MIT License
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).
Is this component compatible with Vue2 or do you have any plans for it?
How can I use a multi-instance of this component on the same page?
Is calculating the "set position" based on the browser window outside the scope of which you want the plugin to handle?
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.
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.
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?
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?
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?
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.
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>
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!
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."
I got the error on IE. Could you fix it?
https://stackoverflow.com/questions/18919560/object-doesnt-support-property-or-method-remove
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.
Currently mobile is not supported.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.