Vue implémente un exemple de plug-in de menu sympa-js tutoriel-php.cn

Vue implémente un exemple de plug-in de menu sympa

小云云

Libérer： 2017-12-21 11:10:31

original

1855 Les gens l'ont consulté

J'ai récemment vu un plug-in de menu très sympa, et j'ai toujours voulu le bricoler sous la forme Vue. Qui sait que je suis un fan inconditionnel de Vue, si ce n'est pas considéré comme love:pensive:. :rire : Amusons-nous un peu et explorons la magie noire ensemble. Les lecteurs qui regardent ce didacticiel doivent avoir certaines connaissances de vue et de css3. Cet article vous présente principalement l'implémentation d'un plug-in de menu sympa basé sur Vue. Ce didacticiel nécessite que vous ayez certaines connaissances de base de css et de vue. à vous étape par étape. Il est très détaillé, veuillez vous y référer si vous en avez besoin, j'espère que cela pourra aider tout le monde.

Structure de cet article

1. Démonstration de l'effet

2 Introduction à l'utilisation

3.Explication des étapes clés

Texte.

1. Démonstration d'effet

pic_1

pic2

pic_3

Démonstration en direct en ligne

2 Introduction à l'utilisation

Adresse du projet : github.com/MingSeng-W/vue-bloom-. menu, cloner le projet Accédez au local

a. Introduisez d'abord le composant de menu dans le composant de fichier unique et importez menuConfig.stylus.

b. Configurez les paramètres correspondants

. Sélectionnez les paramètres

* rayon : la valeur par défaut est de 100 px, la distance entre l'élément et le bouton de menu.

* startAngle : la valeur par défaut est 0, l'angle auquel l'élément commence est enregistré comme 0 avec le sens de l'horloge à 3 heures, puis le sens des aiguilles d'une montre est le sens croissant.

* endAngle : la valeur par défaut est 315, l'angle du dernier élément.

* itemNum : la valeur par défaut est 8

* animationDuration : la valeur par défaut est de 0,5 s, le temps d'exécution de chaque animation d'élément

* itemAnimationDelay : la valeur par défaut est de 0,04 s, l'intervalle de chaque élément temps de retard entre les déclencheurs d'animation

Paramètres requis

* iconImgArr

Importez l'icône dont vous avez besoin, puis générez iconImgArr (liaison d'attribut calculée) et transmettez-la comme accessoires Donnez le composant de menu

la position du menu

Actuellement, il existe deux positions, centre et coin, qui sont spécifiées dans la classe de menu. classe du centre : .menu-center-wrapper

classe du coin : .menu-left-corner-wrapper. Bien entendu, vous pouvez spécifier vous-même l’emplacement.

Un exemple simple

démo

Explication des étapes clés

La clé de la mise en œuvre du tout le menu réside dans le calcul Les coordonnées finales après le développement du menu, ainsi que l'animation de l'expansion et de la contraction (Étant donné que l'ensemble du projet est relativement simple, nous expliquons ici principalement la mise en œuvre de la logique et de l'animation)

Étape 1 : Calculez les coordonnées horizontales et verticales une fois le menu développé. Les x et y sous les coordonnées

représentent respectivement la position de l'élément sur la page, en prenant x comme exemple.

x : la position d'origine, la dernière position développée de x2 et la position de transition au milieu de x1 (provoquant principalement un effet de « retrait »). Ce qui suit est une explication en image afin d'expliquer. C'est simple et clair, j'ai agrandi le rayon, multiplié et augmenté le temps d'exécution de l'animation.

Explication de la position

Calcul de la position : Calculez d'abord l'angle entre chaque élément. L'élément de départ est disposé dans le sens des aiguilles d'une montre. L'angle entre les éléments est égal à. (endAngle-startAngle)/(itemNum-1). L'angle selon lequel l'élément actuel doit être pivoté est : angleCur=startAngle+index*l'angle entre chaque élément. Après avoir obtenu l'angle de rotation de l'élément, multipliez Math.cos, Math.sin et radius pour obtenir son abscisse et son ordonnée

Code clé :

. Calculez l'angle de chaque élément

Explication de la position

La deuxième étape consiste à utiliser js pour générer dynamiquement une animation en fonction des coordonnées générées et à l'insérer dans le fichier de style au milieu.

Générer des images clés développées et contractées

À cette étape, nous avons terminé de cliquer sur le menu pour développer et contracter.

La deuxième étape consiste à terminer l'agrandissement et la disparition de l'élément après avoir cliqué sur l'élément, ainsi que le rétrécissement et la disparition des autres éléments

L'image clé de l'élément disparaît

L'image clé où l'élément disparaît

est utilisée pour déclencher l'animation en utilisant vue pour fournir la transition Lorsque le v-show de l'élément est faux, c'est-à-dire lorsque. l'affichage est nul, l'animation est déclenchée.

Une fois l'animation de chaque élément terminée, l'événement animationEnd sera déclenché et l'événement animationEnd de l'élément sera surveillé. Lorsque toutes les animations sont déclenchées en séquence, il sera rappelé que le menu doit être fermé (parent-. communication du composant enfant).

J'utilise v-on dans le composant menu pour écouter l'événement animationEnd Une fois la propre animation de l'élément exécutée, l'événement animationEnd est déclenché via $emit pour notifier le nombre d'animations du menu ++ lorsque le nombre atteint. le nombre total d'articles, menu à fermer.

code

Lorsque vous ouvrez à nouveau le menu, vérifiez si le showItem lié à l'élément est faux, et si c'est le cas, réglez-le sur vrai. Lorsque vous cliquez, vous devez obtenir l'index de l'élément cliqué et obtenir le currentIndex global, qui est l'index de l'élément cliqué. Celui cliqué utilise l'animation de zoom avant, sinon l'animation de zoom arrière est utilisée.