modification du style du bouton vue elementui

Vue.js est un framework JavaScript permettant de créer des applications Web interactives, tandis qu'ElementUI est un framework d'interface utilisateur basé sur Vue.js.

En tant que l'un des frameworks d'interface utilisateur frontale couramment utilisés, ElementUI fournit de nombreux composants faciles à utiliser pour les développeurs. Le composant bouton est ce que nous utilisons habituellement, mais parfois le style de bouton par défaut peut ne pas répondre aux exigences du projet ou. besoins. Parfois, nous devons modifier le style du bouton. Cet article explique comment utiliser les styles pour modifier les styles des boutons.

Le style du bouton dans ElementUI peut être modifié des manières suivantes :

1. Modifier par nom de classe

Le composant bouton d'ElementUI dispose de plusieurs classes de style par défaut que les développeurs peuvent utiliser, telles que primaire, danger, avertissement, info, succès, attendez. Nous pouvons changer la couleur et le style du bouton grâce à ces noms de classe.

<el-button type="primary">primary</el-button>
<el-button type="danger">danger</el-button>
<el-button type="warning">warning</el-button>
<el-button type="info">info</el-button>
<el-button type="success">success</el-button>

Le type ici est le nom de classe de style du bouton.

Nous pouvons également modifier le style en personnalisant le nom de la classe :

<el-button class="my-btn">Custom</el-button>

.my-btn{
  background-color: #409EFF;
  color: #fff;
}

2. Modifier via le style en ligne

C'est également une méthode réalisable pour modifier le style du bouton via le style en ligne, il suffit d'ajouter l'attribut de style au composant du bouton. :

<el-button style="background-color: #409EFF; color: #fff;">Custom</el-button>

3. En modifiant le style global

Si vous devez l'appliquer à tous les boutons de l'ensemble du projet, nous pouvons le faire en modifiant le style global dans ElementUI. Dans Vue, nous pouvons modifier le style d'ElementUI en créant un nouveau fichier .scss et en l'introduisant dans le fichier d'entrée du projet.

Ce qui suit est un exemple de modification du style de bouton d'ElementUI :

// 引入ElementUI的sass全局变量和mixin
@import "~element-ui/packages/theme-chalk/src/common/var.scss";
@import "~element-ui/packages/theme-chalk/src/mixins/mixins.scss";

// 改写ElementUI的变量
$--color-primary: #409EFF;
$--border-radius-base: 4px;

// 自定义按钮样式
.el-button {
  &.my-btn {
    background-color: $--color-primary;
    border: none;
    box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.45);
    color: #fff;
    &:hover {
      background-color: #66b1ff;
      box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.65);
    }
  }
}

Dans l'exemple ci-dessus, nous avons modifié la couleur du thème et la taille arrondie du bouton en modifiant les variables globales d'ElementUI, puis avons défini notre propre style de bouton et ajouté le Effets dynamiques. Utilisez un nom de classe personnalisé pour écraser le style d'origine d'ElementUI afin de modifier le style du bouton.

Résumé

Ci-dessus, il existe plusieurs façons de modifier le style du composant de bouton ElementUI. Nous pouvons utiliser ces méthodes pour implémenter des styles personnalisés. Il vous suffit de choisir la méthode de modification correspondante en fonction des besoins spécifiques pour obtenir de meilleurs résultats sur la page.

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!