Comment créer un menu de surbrillance de taille moyenne dans Vue

Une fonctionnalité intéressante dans Moyen est le menu en surbrillance qui apparaît lorsque vous sélectionnez du texte. Ce menu contient des boutons qui vous permettent d’effectuer certaines actions sur le texte sélectionné, telles que surligner et partager.

Si vous aimez cette fonctionnalité et que vous souhaitez l’avoir sur votre site, je vais vous montrer comment créer un composant réutilisable qui active ce comportement sur le texte qu’elle contient.

Vous pouvez essayer une démonstration en direct sur CodePen:

Voir le CodePen ici.

Création d'un nouveau projet avec Vue CLI 3

Avec le prototypage instantané Vue CLI 3, nous pouvons rapidement exécuter une application Vue avec un seul fichier * .vue.

Notez que ceci n'est utilisé que pour créer des prototypes, pas pour la production.

Tout d’abord, assurez-vous de l’installer globalement:

npm install -g @ vue / cli-service-global

Dans cette application, nous n’aurons besoin que de deux fichiers: App.vue et Highlightable.vue.

Highlightable.vue est notre composant de menu principal réutilisable. Et App.vue est le composant principal de la page.

Créez les deux fichiers dans le répertoire de votre choix. Ensuite, exécutez vue serve sur App.vue.

vue servir App.vue

Implémenter App.vue

Dans App.vue, nous ajouterons deux paragraphes. Un qui peut être mis en évidence, et un qui ne peut pas.

Nous allons également importer et utiliser Highlightable.vue avant même de le créer. (Ceci est utile pour voir comment nous allons l'utiliser.)

Voici à quoi cela devrait ressembler à la fin:


  
           

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Même si le nombre de participants est inférieur à ce qui est demandé, l’option restante est maintenant disponible!                 

       Ce paragraphe ne peut pas être surligné. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ore repatiat autqu consequatur La La La La La La La Une