R4A.10 - Compléments Web (vuejs)

Exemple basique : passer juste du HTML

• Création du composant MainPage.vue avec la possibilité de customiser le contenu d'une bannière placée en haut+bas de la page, un titre, et le contenu principal :

<template>
  <div>
    <slot name="banner"><span :style="{color:noBanner.color}">{{ noBanner.text}}</span></slot>
    <slot name="title"></slot>
    <slot></slot>
    <slot name="banner">bannière basse</slot>
  </div>
</template>

<script>
  export default {
    name: 'MainPage',
    data : () => {
      return { noBanner: { color:"blue", text: "Pas de bannière"} }
    }
  }
</script>

•  La page principale de l'application App.vue :

<template>
  <div id="app">
    <MainPage>
      <template v-slot:banner>
        <h6>ma bannière</h6>
      </template>
      <template v-slot:title>
        <h1>Mon titre</h1>
      </template>
      <p>Contenu de ma page :</p>
      <ul>
        <li>ligne 1</li>
        <li>ligne 2</li>
      </ul>
    </MainPage>
  </div>
</template>

<script>
import MainPage from "./components/MainPage";

export default {
  name: 'App',
  components: {MainPage}
}
</script>

Un bouton qui publie ses labels

• L'objectif est de créer un composant bouton dont l'aspect graphique peut être entièrement fixé par le composant parent, mais que ce dernier ne puisse choisir le label que parmi une liste fixée par le bouton.
• le composant MyButton.vue :

<template>
  <div>
    <button :class="butclass">
      <slot name="label" v-bind:possLabels="labels">{{labels.ok}}</slot>
    </button>
  </div>
</template>

<script>
  export default {
    name: 'MyButton',
    props: ['butclass'],
    data : () => {
      return { labels: { ok:"OK", cancel: "Cancel", save: "Save"} }
    }
  }
</script>

•  La page principale App.vue :

<template>
  <div id="app">
    <MyButton butclass="mybuttonclass">
      <template v-slot:label="slotProps">
        {{slotProps.possLabels.ok}}
      </template>
    </MyButton>
    <MyButton butclass="mybuttonclass">
      <template v-slot:label="slotProps">
        <h1>{{slotProps.possLabels.cancel}}</h1>
      </template>
    </MyButton>
  </div>
</template>

<script>
import MyButton from "./components/MyButton";

export default {
  name: 'App',
  components: {MyButton}
}
</script>

<style>
.mybuttonclass {
  font-family: Times;
  text-align: left;
  color: blue;
  background-color: coral;
  width: 100px;
}
</style>

 Une liste triable

• L'objectif de créer un composant SortList qui reçoit du composant parent un tableau d'items en props.
• Il permet de trier ces items et de les afficher sous forme de liste à puce.
• En revanche, le rendu de chaque ligne de la liste est fixé par le composant parent.

• Le composant SortList.vue :

<template>
  <div>
    <slot></slot>
    <ul>
      <li v-for="it in items" v-bind:key="it.id">
        <slot name="item" v-bind:item="it"></slot>
      </li>
      <button @click="reorder">reorder</button>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'SortList',
    props: ['items'],
    data : () => {
      return { order:1 }
    },
    methods: {
      reorder : function() {
        this.items.sort((a, b) => {
          if (this.order == 1) {
            this.order = 2;
            return b.id - a.id;
          } else {
            this.order = 1;
            return a.id - b.id;
          }
        });
      }
    }
  }
</script>

• La page principale App.vue :

<template>
  <div id="app">
    <SortList v-bind:items="todos">
      <template v-slot:item="{item}">
        <span v-if="item.isComplete">✓</span>
        {{ item.text }}
      </template>
         ma liste de choses à faire 
    </SortList>
  </div>
</template>

<script>
import SortList from './components/SortList.vue'

export default {
  name: 'App',
  data : () => { return { todos: [ {id:1, isComplete:true, text:"dormir"}, {id:2, isComplete:false, text:"manger"} ] }
  },
  
  components: {
    SortList
  }
}
</script>