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. 
< 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 = "
Source link
