0
107
ViewsMenú desplegable deslizante hacia arriba y hacia abajo en vue js
.main ul { height: 100px; width: 200px; background: gray; overflow:hidden } .main a { margin: 10px 0; } <div class="main"> <a href="#">Up </a> <ul> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> </ul> <a href="#">Down </a> </div>Ahora quiero que si hago clic en el botón hacia arriba, el elemento de la lista debería deslizarse hacia arriba y si hago clic en el botón hacia abajo, el elemento de la lista debería bajar. ¿Cómo puedo hacer esto con vue js? Por favor, que alguien me ayude.
2 answers
Answer question0
¿Es este el efecto que esperabas lograr? El uso liberal de querySelector , querySelectorAll y varios selectores hermanos hacen que esta sea una tarea relativamente sencilla.
// assign event handler to each hyperlink which themselves have a dataset attribute to aid identification document.querySelectorAll('a[data-dir]').forEach( a=>a.addEventListener('click',function(e){ // the css class that will be assigned to indicate selected item const cn='active'; let ul=this.parentNode.querySelector('ul'); let col=Array.from( ul.querySelectorAll('li') ); // prevent highlist disappearing if( ( ul.querySelector('li.active')==ul.lastElementChild && this.dataset.dir=='down' ) || ( ul.querySelector('li.active')==ul.firstElementChild && this.dataset.dir=='up' ) )return false; // If no active element is found, make the first LI active. if( !ul.querySelector('li.active') )ul.firstElementChild.classList.add( cn ); else{ // otherwise process all LI elements until we find the active element col.some( li=>{ if( li.classList.contains(cn) ){ // clear an other instances of the active class col.forEach(n=>n.classList.remove(cn)); // highlight appropriate previous/next LI element switch( this.dataset.dir ){ case 'up': if( li.previousElementSibling!=null && li.previousElementSibling.tagName=='LI' )li.previousElementSibling.classList.add(cn) break; case 'down': if( li.nextElementSibling!=null && li.nextElementSibling.tagName=='LI' )li.nextElementSibling.classList.add(cn); break; } return true; } }); } })); .main ul { min-height: 100px; width: 200px; background: gray; overflow:hidden; list-style:none inside; } .main a { margin: 10px 0; } li{ padding:0.25rem;background:whitesmoke; } .active{ background:pink; } <div class="main"> <a href="#" data-dir='up'>Up</a> <ul> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> <li>dropdown 1</li> </ul> <a href="#" data-dir='down'>Down</a> </div>0
@Professor Abronsius tiene una buena solución usando Javascript puro, pero si desea hacer esto en Vue, deberá tener sus tiempos en su objeto de data y una variable de alcance para realizar un seguimiento de qué elemento se selecciona.
Para ampliar esto, probablemente desee actualizar dinámicamente su matriz de tiempos a medida que el usuario los recorre.
new Vue({ el: "#app", data: { selected:2, times: [ "11:00am", "10:00am", "9:00am", "8:00am", "7:00am", "6:00am" ] }, methods: { up: function(){ this.selected--; }, down: function(){ this.selected++; } } }) ul { width:100px; } li.active { background-color:lightgrey; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <h2>Times:</h2> <span v-on:click="up">Up</span> <ul> <li v-for="(time, index) in times" :class="{ active : selected == index}"> {{time}} </li> </ul> <span v-on:click="down">Down</span> </div>