le contrôle de date de vue change la longueur et la largeur

Préface

En vue, le contrôle de date est l'un des composants très importants. Le contrôle de date peut non seulement sélectionner facilement les dates, mais également implémenter le formatage de la date et les styles de composants personnalisés. Dans le développement réel, nous rencontrons souvent des situations dans lesquelles nous devons modifier la longueur et la largeur des contrôles de date. Cet article explique comment modifier la longueur et la largeur du contrôle de date via les accessoires et l'ajustement du style CSS du composant vue.

1. Utilisez des accessoires pour modifier la longueur et la largeur du contrôle de date

En vue, les accessoires sont un moyen de transmettre des données aux composants. composants en composants enfants. Les types d'accessoires courants incluent les chaînes, les nombres, les booléens, les objets, les tableaux, etc. Nous pouvons implémenter la fonction de modification de la longueur et de la largeur du contrôle de date en définissant des accessoires dans le composant. Les étapes spécifiques sont les suivantes :

1. Définir les accessoires dans le sous-composant Datepicker. vue:
# 🎜🎜#

props: {
  width: {
    type: Number,
    default: 150
  },
  height: {
    type: Number,
    default: 35
  }
}

Deux accessoires sont définis dans ce composant : width et height, qui représentent respectivement la largeur et la hauteur du contrôle de date. Parmi elles, les valeurs par défaut de largeur et de hauteur sont respectivement 150 et 35.

Utilisez des accessoires dans le modèle du composant Datepicker.vue

Utilisez des accessoires dans le modèle, qui peuvent être transmis au composant parent via la directive v-bind La valeur des accessoires transmise et utilisez l'attribut style pour définir la largeur et la hauteur du contrôle de date :

<template>
  <div class="datepicker" :style="{width: width + 'px', height: height + 'px'}">
    <input type="text" v-model="date" readonly>
  </div>
</template>

Dans le modèle, utilisez la directive v-bind pour lier la largeur et valeurs de hauteur transmises par le composant parent au courant dans le style du composant. Parmi eux, ':style="{width: width + 'px', height: height + 'px'}" signifie utiliser des styles en ligne pour définir la largeur et la hauteur du contrôle. De cette façon, la longueur et la largeur du contrôle de date peuvent être modifiées via les accessoires passés par le composant parent.

Passer les valeurs de largeur et de hauteur​​dans le composant parent

Dans le composant parent, vous pouvez définir la largeur et la hauteur valeurs via les propriétés de la balise du composant . De cette manière, différentes valeurs de largeur et de hauteur peuvent être transmises dans différents composants parents pour obtenir un ajustement flexible de la longueur et de la largeur du contrôle de date.

<template>
  <div class="wrapper">
    <datepicker :width="200" :height="40"></datepicker>
  </div>
</template>

Dans le composant parent, utilisez le composant datepicker et définissez la largeur sur 200 et la hauteur sur 40 via les propriétés. Cela permet des modifications universelles de la longueur et de la largeur du contrôle de date.

2. Utilisez des styles CSS pour modifier la longueur et la largeur du contrôle de date

En plus d'utiliser des accessoires pour modifier la longueur et la largeur du contrôle de date, nous pouvons également utilisez des styles CSS pour obtenir la longueur du contrôle de date et l'ajustement de la largeur. L'avantage de cette méthode est que la longueur et la largeur du contrôle de date peuvent être ajustées de manière plus flexible, mais elle nécessite l'ajout manuel de styles CSS au composant, ce qui est plus gênant. Voici les étapes spécifiques :

Définir le style du contrôle de date

Ajouter le style css dans le composant Datepicker.vue, comme suit :

<style scoped>
.datepicker {
  width: 150px;
  height: 35px;
}
</style>

Définissez la largeur du contrôle sur 150px et la hauteur sur 35px.

Remplacez le style dans le composant parent

Dans le composant parent, remplacez le style du composant enfant en ajoutant l'attribut class au Composant datepicker : # 🎜🎜#

<template>
  <div class="wrapper">
    <datepicker class="my-datepicker"></datepicker>
  </div>
</template>

<style>
.my-datepicker {
  width: 200px;
  height: 40px;
}
</style>

De cette façon, le style du composant enfant peut être remplacé dans le composant parent et la longueur et la largeur du contrôle de date peuvent être ajustées.

Résumé

En vue, le contrôle de la date est l'un des composants très importants. La longueur et la largeur du contrôle de date peuvent être modifiées via des accessoires et des styles CSS. L'utilisation des accessoires est relativement simple, passant et définissant la largeur et la hauteur du contrôle via la directive v-bind et l'attribut style dans le modèle. L'utilisation de styles CSS nécessite d'ajouter des styles manuellement, ce qui est relativement fastidieux, mais plus flexible. Grâce à ces deux méthodes, nous pouvons choisir une méthode plus appropriée en fonction des besoins réels de développement pour ajuster la longueur et la largeur du contrôle de date.

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!