Comment utiliser vue et Element-plus pour implémenter une mise en page réactive et un écran adaptatif

Comment utiliser vue et Element-plus pour implémenter une mise en page réactive et des écrans adaptatifs

À l'ère actuelle de l'Internet mobile, les appareils avec différentes tailles d'écran deviennent de plus en plus populaires, et la mise en page réactive et les écrans adaptatifs des sites Web sont devenus indispensables fonctionnalité . Dans le cadre de Vue.js et Element-plus, il est très simple d'implémenter une telle mise en page. Cet article vous montrera comment utiliser ces deux outils pour obtenir une mise en page réactive et des écrans adaptatifs.

1. Installez et configurez Vue.js et Element-plus

Tout d'abord, assurez-vous que Vue.js et Element-plus sont installés dans votre projet. Il peut être installé à l'aide d'outils de gestion de packages tels que npm ou Yarn. Une fois l'installation terminée, importez les fichiers de style d'Element-plus dans votre projet.

Dans Vue, nous pouvons l'introduire globalement en important le fichier de style Element-plus dans le fichier main.js.

// main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App)
  .use(ElementPlus)
  .mount('#app')

2. Mise en page réactive

Dans Element-plus, certains composants de mise en page courants sont fournis pour nous aider à mettre en œuvre une mise en page réactive.

• Container : composant conteneur, utilisé pour envelopper un groupe d'éléments de mise en page.
• Row : composant de ligne, utilisé pour envelopper les éléments de colonne.
• Col : composant Colonne, utilisé pour définir la largeur de la colonne.

Voici un exemple simple de mise en page responsive :

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-aside>Aside</el-aside>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {}
  },
}
</script>

<style scoped>
div {
  height: 100vh;
}

.el-header {
  background-color: #f2f2f2;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #f5f7fa;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #f2f2f2;
  text-align: center;
  line-height: 200px;
}

.el-footer {
  background-color: #f2f2f2;
  text-align: center;
  line-height: 60px;
}
</style>

Dans cet exemple, nous divisons la page en 4 parties : En-tête, Aside, Main et Footer. Utilisez le composant Container pour les envelopper, le composant Row pour envelopper les éléments de colonne et le composant Col pour définir la largeur de la colonne.

Le code ci-dessus divisera la page en trois parties : supérieure, centrale et inférieure. La partie supérieure est l'en-tête, la partie centrale est principale, la partie inférieure est le pied de page et il y a un côté à gauche.

3. Écran adaptatif

L'écran adaptatif est implémenté afin que la page puisse afficher la mise en page et le style corrects sur des appareils de différentes tailles. Element-plus fournit des classes CSS qui peuvent nous aider à implémenter des écrans adaptatifs.

• el-col-xs-* : styles qui prennent effet sur les appareils mobiles.
• el-col-sm-* : styles qui prennent effet sur les tablettes.
• el-col-md-* : styles qui prennent effet sur les appareils de bureau.

Voici un exemple d'adaptation aux écrans :

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside :span="4">
          Aside (span=4)
        </el-aside>
        <el-main :span="20">
          Main (span=20)
        </el-main>
      </el-container>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {}
  },
}
</script>

<style scoped>
div {
  height: 100vh;
}

.el-header {
  background-color: #f2f2f2;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #f5f7fa;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #f2f2f2;
  text-align: center;
  line-height: 200px;
}

.el-footer {
  background-color: #f2f2f2;
  text-align: center;
  line-height: 60px;
}

@media screen and (max-width: 480px) {
  .el-aside,
  .el-main {
    padding: 10px;
  }
}
</style>

Dans cet exemple, une requête @media est utilisée pour changer le style d'un élément lorsque la taille de l'écran est de 480px ou moins. La taille de l'écran étant trop petite, nous avons ajouté quelques valeurs de remplissage à Aside et Main pour nous adapter à l'écran plus petit.

Résumé

À travers les exemples ci-dessus, nous pouvons voir qu'il est très simple d'implémenter une mise en page réactive et un écran adaptatif à l'aide de Vue.js et Element-plus. En utilisant simplement les composants de mise en page et les classes CSS fournis par Element-plus, nous pouvons afficher la mise en page et le style corrects sur différentes tailles d'écran. Que ce soit sur un téléphone mobile, une tablette ou un appareil de bureau, nous pouvons offrir une expérience utilisateur exceptionnelle.

J'espère que cet article vous sera utile et j'espère que vous pourrez implémenter avec succès une mise en page réactive et un écran adaptatif dans le processus d'utilisation de Vue.js et Element-plus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!