Fermer

avril 19, 2019

Comment utiliser un composant d'interface utilisateur Bouton Vue dans votre application Web


Dans cet article, vous allez apprendre à utiliser le composant Button de Kendo UI avec Vue. Pour illustrer le fonctionnement du bouton, nous allons construire une pagination pour une liste de photos de chats. Chaque page aura un titre et une image ainsi que les boutons suivant et précédent. En cliquant sur les boutons, vous vous déplacerez dans les pages. Lorsque vous atteignez la fin des messages, le bouton suivant devient désactivé. Lorsque vous atteignez le poste de début, le bouton précédent est désactivé.

Tout d'abord, nous allons initialiser notre projet avec les données de nos pages. Nous ajouterons ensuite les boutons et mettrons en œuvre leurs gestionnaires de clics.

Mise en route

Nous allons installer Vue en ajoutant un lien vers le CDN vers la tête de notre fichier HTML. Comme nous utilisons le CDN de Vue, nous devrons établir une liaison avec le CDN de l’interface utilisateur de Kendo pour Vue. Les composants Vue de Kendo UI sont regroupés dans différents fichiers. Vous trouverez ci-dessous le lien vers le fichier que nous allons utiliser pour charger le composant bouton:

 < script   src  =  " https://unpkg.com/@progress /kendo-buttons-vue-wrapper/dist/cdn/kendo-buttons-vue-wrapper.js"&19659008hooting Dans le corps de notre page, nous allons créer un élément sur lequel monter l’instance Vue. À l'intérieur de cet élément, il y a un en-tête pour le titre et un élément d'image qui sera lié aux données de notre instance Vue. Les données seront un tableau d'objets de publication ayant un attribut title et src. Pour commencer, nous allons créer une instance Vue qui pointe sur l'ID de notre élément racine, initialise les données avec les données de publication et dispose d'un index pour garder une trace de la publication actuelle sélectionnée. Ensuite, nous allons ajouter la propriété calculée  post  pour extraire un article de la liste. Le code suivant montre le premier message. 
  Vue 



 < html > 
   < head > 
     < meta   charset  =  " utf-8 "  > 
     < titre >  Bouton Vue  </  ] titre > 
     < link   rel  =  " feuille de style "    href  =  "[1945912] https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css  " > 
     < link   rel.  =  " feuille de style "    href  =  " https://kendo.cdn.telerik.com/2018.3.1017/ styles / kendo.default.min.css  " > 
     < script   src  = "  https: //code.jquery .com / jquery-1.12.3.min.js  " >  </ [1 9459012] script > 
     < script   src  =  " https://kendo.cdn.telerik.com/2018.3.1017/js/kendo. all.min.js  " >  </  script > 
     < script   src  = "  https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js  " >  </  script > [19659018] < script   src  =  " https://unpkg.com/@progress/kendo-buttons-vue-wrapper/dist/cdn/kendo-buttons-vue -wrapper.js  " >  </  script > 
     < style >  
        #app   { margin-top :   10% ;   famille de polices :  helvetica ]; } 
       img  { largeur :   75% ; } 
       . 1965-cent] [19659000]. ] { text-align :  centre ; } 
      </  de style > 
   </  head > 
   < du corps > 
     < div [19659006] id  =  " app "    class  =  " du centre de texte "  [19659000]  > 
       < div > 
         < h1 >  {{post.title}}  </  h1 > 
         < img  : src  =  " post.src "    alt  =  " cats  "  /> 
       </  div > 
     </  div > 
     < script >  
       var  posts  =   [ {
        titre :   'Le crépuscule' 
        src :   'https://images.unsplash.com/photo-1503431128871-cdd250803fa41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWiOjEyMDd9&auto=fr&cf& , 
       {
        titre :   'Whiskers' 
        src :   'https://images.unsplash.com/photo-1448222993383-a2fff2914d27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWiOjEyMDd9&auto=format&fit=cr , 
       {
        titre :   'Smokey' 
        src :   'https://images.unsplash.com/photo-1511275539165-cc46b1ee89bf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80' 
      ] ] 19659008]; 
 
       new   Vue  ( {
        el :   '# app' 
        données :   {
          messages :  messages 
          index :   0 
        } 
        calculé :   {
          post :   function  ()   {
             renvoie   ceci .   [ tel que . .  index ] ; 
          } 
        } 
      } ) ; 
      </  script > 
   </  body > 
 </  html > 
 
 Ajout des boutons
 Pour activer et désactiver les boutons, ils se voient attribuer un attribut  disabled  qui sera égal à une propriété booléenne dans notre instance Vue. Pour le bouton précédent, nous allons ajouter la propriété  aPrécédent  à nos données et l'initialiser à  false . Comme l'index   est initialisé à zéro, le bouton précédent doit être désactivé. Pour le bouton suivant, la propriété  hasNext  sera ajoutée aux données et initialisée à true. Le bouton suivant sera désactivé lorsque le dernier élément sera sélectionné. Voici le code mis à jour:
 
 < div   id  =  " app "    classe  =  " centre de texte  " > 
   ...
    < Bouton kendo  : désactivé  =  "! APrécédent "    @click  =  "
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link