Maison interface Web uni-app Comment référencer les composants intégrés dans Uniapp

Comment référencer les composants intégrés dans Uniapp

Apr 20, 2023 pm 03:05 PM

En tant que framework de développement multiplateforme, Uni-app dispose d'une bibliothèque de composants très riche, et les composants intégrés en constituent une partie importante. Les composants intégrés sont hautement réutilisables et faciles à utiliser, et sont des encapsulations de certaines fonctions couramment utilisées, telles que les boutons, les zones de saisie, les listes, etc. Pendant le développement, vous pouvez rapidement implémenter ces fonctions communes en référençant les composants intégrés et améliorer l'efficacité du développement. Cet article présentera comment Uni-app référence les composants intégrés.

  1. Ajouter des composants intégrés dans le fichier pages.json
    Dans le fichier de configuration de page pages.json d'Uni-app, il y a un élément de configuration global "usingComponents". Cet élément de configuration peut être utilisé pour référencer la bibliothèque de composants intégrée utilisée par le projet. Nous pouvons ajouter le chemin du composant intégré que nous devons utiliser ici. Le chemin peut être un chemin relatif ou un chemin absolu.

Par exemple, pour référencer le composant icon dans la bibliothèque d'icônes uni-icons dans la page, vous devez ajouter le code suivant au fichier pages.json :

"usingComponents": {
  "uni-icons": "@/uni-icons/uni-icons.vue"
}
Copier après la connexion

Parmi eux, "uni-icons" est le composant personnalisé nom du composant, qui peut être choisi avec désinvolture. "@/" représente le répertoire racine du projet. Ici, le composant uni-icons est placé dans le dossier uni-icons dans le répertoire racine du projet.

  1. Référencer les composants intégrés dans la page
    Pour utiliser les composants intégrés dans la page, il vous suffit d'écrire le nom du composant personnalisé dans la balise.

Prenons comme exemple le composant icon de la bibliothèque d'icônes uni-icons. Le code est le suivant :

<template>
    <view class="icon-container">
        <uni-icons type="add"></uni-icons>
        <uni-icons type="attention"></uni-icons>
        <uni-icons type="settings"></uni-icons>
    </view>
</template>
Copier après la connexion

Parmi eux, l'attribut type est utilisé pour spécifier l'icône à afficher. Par exemple, type="add" signifie afficher une icône plus. De cette manière, les développeurs peuvent facilement implémenter l’utilisation de certains composants courants. La bibliothèque de composants intégrée intègre de nombreux composants de base courants, tels que des boutons, des zones de saisie, des sélecteurs, etc., pour répondre aux besoins fondamentaux des développeurs.

  1. Personnaliser les composants intégrés
    Si le composant souhaité n'est pas disponible dans la bibliothèque de composants intégrés, vous pouvez également personnaliser un composant intégré. Les composants intégrés personnalisés sont fondamentalement définis de la même manière que les composants ordinaires et peuvent être référencés de la manière ci-dessus. Il convient de noter que lors de la personnalisation des composants, vous devez suivre les spécifications de développement des composants dans Uni-app.

Ce qui suit est un exemple de composant intégré personnalisé courant :

<template>
  <view class="uni-badge" :class="{'uni-badge--dot':dot}" v-if="show">
    <slot></slot>
  </view>
</template>

<script>
export default {
    name: 'uni-badge',
    props: {
    dot: {
      type: Boolean,
      default: false
    },
    show: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style scoped>
.uni-badge {
  display: inline-block;
  font-size: 24rpx;
  line-height: 40rpx;
  color: #fff;
  background-color: #f5222d;
  border-radius: 20rpx;
  text-align: center;
  width: 40rpx;
  height: 40rpx;
}
.uni-badge--dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 6rpx;
  line-height: 0;
  font-size: 0;
  margin-left: 20rpx;
}
</style>
Copier après la connexion

Le code ci-dessus définit un composant nommé uni-badge. La fonction principale du composant est d'afficher une étiquette avec un score ou une marque, le score pouvant être n'importe quel nombre et la marque pouvant être un point rouge ou un autre graphique.

Lors de la personnalisation des composants intégrés, vous devez écrire du code conformément aux spécifications des composants d'Uni-app. La méthode de référence des composants est également celle mentionnée ci-dessus.

Résumé
Grâce à l'introduction de cet article, nous avons appris comment Uni-app référence les composants intégrés. Il peut facilement utiliser des composants intégrés, réduire le temps de développement et également personnaliser les composants intégrés pour répondre aux besoins de l'entreprise. Pendant le développement, les développeurs peuvent utiliser les composants intégrés de manière flexible en fonction de leurs propres besoins pour améliorer l'efficacité du développement et mettre en œuvre des applications plus puissantes.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment gérer le stockage local à Uni-App? Comment gérer le stockage local à Uni-App? Mar 11, 2025 pm 07:12 PM

Comment gérer le stockage local à Uni-App?

Comment renommer les fichiers de téléchargement UNIAPP Comment renommer les fichiers de téléchargement UNIAPP Mar 04, 2025 pm 03:43 PM

Comment renommer les fichiers de téléchargement UNIAPP

Comment utiliser les API de géolocalisation Uni-App? Comment utiliser les API de géolocalisation Uni-App? Mar 11, 2025 pm 07:14 PM

Comment utiliser les API de géolocalisation Uni-App?

Comment gérer l'état à Uni-App à l'aide de Vuex ou PINIA? Comment gérer l'état à Uni-App à l'aide de Vuex ou PINIA? Mar 11, 2025 pm 07:08 PM

Comment gérer l'état à Uni-App à l'aide de Vuex ou PINIA?

Comment faire des demandes d'API et gérer les données dans Uni-App? Comment faire des demandes d'API et gérer les données dans Uni-App? Mar 11, 2025 pm 07:09 PM

Comment faire des demandes d'API et gérer les données dans Uni-App?

Comment utiliser les API de partage social de l'Uni-App? Comment utiliser les API de partage social de l'Uni-App? Mar 13, 2025 pm 06:30 PM

Comment utiliser les API de partage social de l'Uni-App?

Comment gérer l'encodage des fichiers avec UniApp Download Comment gérer l'encodage des fichiers avec UniApp Download Mar 04, 2025 pm 03:32 PM

Comment gérer l'encodage des fichiers avec UniApp Download

Comment utiliser la fonction Easycom d'Uni-App pour l'enregistrement des composants automatiques? Comment utiliser la fonction Easycom d'Uni-App pour l'enregistrement des composants automatiques? Mar 11, 2025 pm 07:11 PM

Comment utiliser la fonction Easycom d'Uni-App pour l'enregistrement des composants automatiques?

See all articles