3
votes

Affichage et masquage de la boîte en cliquant sur vue js

Je souhaite masquer et afficher lorsque je clique sur l'icône panier . Le problème est de masquer à nouveau cette boîte,

icône avant de cliquer: https://imgur.com/RxmcwsX
après clic: https://imgur.com/cCt4mk0
Voici l'image css: https://imgur.com/d6ZPUbY
vue js: https://imgur.com/2kWZdly

code mycss :

    var cart = new Vue({
    el: '#cart',
    data: {
        visibility: 'hidden'
    },
    computed: {
        computedVisibility: function() {
            return this.visibility;
        }
    },
    methods: {
        showCart: function(event) {
            this.visibility = 'visible';
        }
    }
});

code de vue

<li class="nav-item" id="cart">
<i class="fa fa-shopping-cart fa-lg" @click="showCart"></i>
<div id="list-cart">
    <div class="shadow-lg" style="position:absolute;background-color: #FFF;width:300px;height:300px;right:210px;top:60px;border-radius: 5px;" v-bind:style="{ visibility: computedVisibility }"></div>
</div>

javascript html css vue.js

0 commentaires

3 Réponses :

3
votes

Utilisez v-if au lieu de manipuler directement les styles:

<li class="nav-item" id="cart">
<i class="fa fa-shopping-cart fa-lg" @click="visible = !visible"></i>
<div id="list-cart">
    <div class="shadow-lg" v-if="visible"></div>
</div>

var cart = new Vue({
  el: '#cart',
  data: () => ({
    visible: false
  })
});

2 commentaires

c'est du travail merci, mais cela doit être cliquez sur l'icône du panier, comment l'éliminer en cliquant n'importe où?

Pour ce faire, vous devez détecter les clics en dehors des limites des éléments. Voici un exemple .

-2
votes

Si le script donné dans votre question fonctionne, vous pouvez simplement changer la fonction showCart comme ci-dessous.

    var cart = new Vue({
    el: '#cart',
    data: {
        visibility: 'hidden'
    },
    computed: {
        computedVisibility: function() {
            return this.visibility;
        }
    },
    methods: {
        showCart: function(event) {

          if(this.visibility ==='visible'){
                this.visibility = 'hidden';
          }else if(this.visibility==='hidden'){
                this.visibility = 'visible'
          }

        }
    }
});

0 commentaires

1
votes

Vous pouvez essayer de le lier à une classe à la place. Ensuite, vous pouvez avoir une expression ternaire qui détermine votre classe.

<style scoped>
  .show {
    visibility: visible
  }
.hide {
    visibility: hidden
  }
</style>

Ensuite, vous pouvez avoir un élément de données, visible, qui est initialement défini sur false. Vous devez également faire des données une fonction

showCart() {
        this.visible = !this.visible
    }

alors votre fonction d'affichage du panier peut simplement être:

data: () => ({
  visible: false
})

que vous pouvez également appeler pour fermer le panier. p>

Et puis définissez vos styles:

<li class="nav-item" id="cart">
<i class="fa fa-shopping-cart fa-lg" @click="showCart"></i>
<div id="list-cart">
    <div
     style="position:absolute;
     background-color: #FFF;
     width:300px;
     height:300px;
     right:210px;
     top:60px;
     border-radius: 5px;"
     v-bind:class="[visible ? 'show' : 'hide', 'shadow-lg']">
    </div>
</div>

Cela dit, il existe de nombreux paquets qui offrent des «modaux» où cela serait en grande partie géré pour vous. Je recommanderais vuetify mais si vous êtes du type à l'ancienne, vous pouvez même utiliser le bootstrap.

1 commentaires

J'aime votre approche, car il y a des situations comme un menu en expansion où vous voulez cliquer sur lier quelque chose à des éléments conditionnellement cachés. Si vous utilisez v-if à la place, les éléments seront supprimés et ajoutés du DOM de manière conditionnelle et la liaison de clic peut échouer.