Kuidas luua keskkonnasõbraliku esiletõstetud menüü Vue

Lahe funktsioon keskmises on esiletõstetud menüü, mis ilmub mõne teksti valimisel. Selles menüüs on nupud, mis võimaldavad teil valitud tekstiga teatud toiminguid teha, nagu esiletõstmine ja jagamine.

Kui teile see funktsioon meeldib ja soovite, et see oleks teie saidil, siis näitan teile, kuidas luua korduvkasutatav komponent, mis võimaldab seda kasutada selles sisalduvas tekstis.

CodePenis saate proovida reaalajas demo:

Vaadake CodePeni siin.

Uue projekti loomine Vue CLI 3 abil

Vue CLI 3 kiire prototüüpimisega saame kiiresti käivitada Vue rakenduse vaid ühe * .vue-failiga.

Pange tähele, et seda kasutatakse ainult prototüüpide loomiseks, mitte tootmiseks.

Esiteks veenduge, et see oleks installitud globaalselt:

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

Selles rakenduses vajame ainult kahte faili: App.vue ja Highlightable.vue.

Highlightable.vue on meie korduvkasutatav esiletõstetud menüü komponent. Ja App.vue on põhilehe komponent.

Looge mõlemad failid suvalises kataloogis; seejärel käivitage App.vue'is vue serveerimine.

Vue teenindab App.vue

Rakenduse App.vue rakendamine

Rakenduses App.vue lisame kaks lõiku. Üks, mida saab esile tõsta, ja teine, mida ei saa.

Enne selle loomist impordime ja kasutame ka Highlightable.vue. (See on kasulik, et näha, kuidas me seda kasutama hakkame.)

See peaks lõpuks välja nägema:


  
           

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Olge õnnelikud, kui teil on õigus seda teha, kui teil ei ole võimalik seda teha, kui te ei kavatse praktiseerida, siis peaksite neid uuesti kasutama, kuid te olete abikõlblikud!       

         

       Seda lõiku ei saa esiletõsteta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore ipsam tõrjumine, fugiat aut ex incuntunt ut quisquam quasi sequatur ducimus quo in, cum soluta eos dolores tempore under voluptate modi.     

  
import Highlightable from './Highlightable' eksport vaikimisi {   komponendid: {Highlightable},   meetodid: {     onShare (tekst) {       console.log ('jaga:', tekst)     },     onHighlight (tekst) {       console.log ('esiletõstmine', tekst)     }   } } * {   kasti suurus: äärise kast; } .app {   laius: 800 pikslit;   veeris: 40 pikslit automaatne;   polster: 10 px;   fondiperekond: Verdana;   värv: # 333;   laius: 100%; } p {   joone kõrgus: 1,5; }

Nagu ülal näete, tegeleme Highlightable kahe üritusega. Need kaks sündmust on esiletõstetud menüü nuppude toimingud. Need on vaid näited. Saate neid muuta ükskõik mida soovite.

Highlightable.vue juurutamine

Malliosa koosneb kahest osast: menüüelement nuppudega ja teksti kuvamiseks.

Alustame malliga selle koodiga:


  
    
               Jaga                       Tõstke esile                   
            

Pange tähele, et me kasutame showMenu, mida me pole veel loonud, et teha kindlaks, kas peaksime menüüd kuvama.

Liigume nüüd stiiliosa juurde.

Lisage jaotisesse

Miski pole siin liiga keeruline. .menüü on esiletõstetud menüü jaoks. menüü: pärast on menüü allosas keskel asuv väike kolmnurk (nool).

Üks oluline asi, mida siin märkida, on .menu absoluutne positsioon. Vajame seda, et paigutada see valitud teksti kohale.

Lõpuks liigume jaotisse