Comment implémenter le composant corner card à l'aide de Vue ?

Dans le développement Web, la mise en page des cartes a toujours été l'une des tendances de conception les plus populaires. Désormais, alors que de plus en plus d'applications commencent à utiliser Vue.js, les développeurs commencent également à explorer comment utiliser Vue.js pour implémenter des composants de carte.

Cet article expliquera comment utiliser Vue.js pour implémenter le composant de carte de coin, et démontrera également comment rendre le composant de carte plus vivant en ajoutant des effets de transition.

Qu'est-ce qu'un composant de carte écorné ?

Le composant Cornered Card est une conception d'interface utilisateur visuellement attrayante qui crée une forme unique en pliant les coins supérieurs de la carte, comme ceci :

9cc3358c2fa2c5697401e403c726ad39

Corner Card Component a généralement un titre et une description ainsi qu'un bouton pour guider l'utilisateur vers une opération spécifique. Dans cet article, nous allons implémenter un simple composant de carte écorné et ajouter des effets de transition pour que les éléments de la page apparaissent et se cachent plus facilement.

Préparation

Avant de commencer à implémenter le code, vous devez préparer les éléments suivants :

• Vue CLI3 : Cela nous aidera à créer facilement une nouvelle application Vue.
• FontAwesome : ce sera la bibliothèque d'icônes vectorielles que nous utilisons.
• Éditeur de code : il est recommandé d'utiliser un éditeur de texte populaire et facile à utiliser tel que Visual Studio Code ou Sublime Text.

D'accord, commençons !

Créer une application Vue

Créer une nouvelle application Vue à l'aide de Vue CLI3 est le moyen le plus rapide et le plus pratique. Tout d’abord, assurez-vous que Vue CLI3 est installé localement. Sinon, veuillez utiliser la commande suivante pour l'installer :

npm install -g @vue/cli

Une fois l'installation terminée, vous pouvez utiliser la commande suivante pour créer une nouvelle application Vue :

vue create my-app

Ici "my-app" est le nom de votre projet. Assurez-vous de passer au bon répertoire sur la ligne de commande et de remplacer my-app par le nom souhaité.

Vue CLI3 créera automatiquement une nouvelle application Vue dans votre dossier, qui contient quelques modèles et fichiers de base.

Créer le composant Corner Card

Pour créer le composant Corner Card, nous ajouterons un nouveau composant au modèle Vue. Ce composant contiendra tous les éléments de la carte, y compris le titre, la description et les boutons. Commençons par créer un nouveau composant Vue Single File (SFC) nommé FoldCard.vue. FoldCard.vue。

<template>
  <div class="fold-card">
    <div class="fold-card-header">
      <h2>{{ title }}</h2>
      <a href="#" class="fold-card-close" @click="closeCard">
        <i class="fas fa-times"></i>
      </a>
    </div>
    <div class="fold-card-content">
      <slot></slot>
    </div>
    <div class="fold-card-footer">
      <a href="#" class="button">{{ buttonText }}</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FoldCard',
  props: {
    title: String,
    buttonText: String
  },
  methods: {
    closeCard() {
      this.$emit('close-card');
    }
  }
};
</script>

<style scoped>
...
</style>

这个组件包含了折角卡片组件的所有基本元素，包括一个卡片头部的标题、描述、关闭按钮以及一个按钮，用于指示用户应该执行的操作。我们也添加了一个名为 closeCard() 的方法来关闭卡片。

我们也将使用 Font Awesome 来添加一个关闭图标。要使用 Font Awesome，您需要将以下代码添加到您的 Vue CLI3 项目的 index.html 中。

<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
  integrity="sha384-gfdkzPd1SlsUB7XvyH+K9CQv5gW5ceXw981FeynX+11mZsJ6oO8WQI5Tzya/vRLB"
  crossorigin="anonymous"
/>

实现折角

现在，我们将添加折角。为此，我们需要在卡片的两个相邻的边角处添加一个伪元素。

.framed {
  position: relative;
}

.framed::before,
.framed::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 80px 80px 0;
  border-color: transparent #7386D5 transparent transparent;
}

.framed::after {
  right: -2px;
  border-width: 0 78px 80px 0;
  border-color: transparent #ADC7FF transparent transparent;
  z-index: -1;
}

我们使用 boder-style 创建具有零宽度和高度的斜线，使其能够覆盖所有四个角落。我们还使用 border-color 指定折角的颜色。

添加样式

我们将使用 CSS 样式为 fold-card 中的所有元素添加样式，以使其在页面中出现为卡片效果：

.fold-card {
  width: 320px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  background-color: white;
  overflow: hidden;
  transition: all 0.3s ease;
}

在这里，我们添加了卡片的基本样式，包括卡片的圆角边框、阴影效果和背景颜色。

接下来，我们将为卡片的头部、内容和脚部添加样式：

.fold-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background-color: #7386D5;
}

.fold-card-header h2 {
  color: white;
  font-size: 22px;
  margin: 0;
}

.fold-card-header .fold-card-close {
  color: white;
}

.fold-card-content {
  padding: 20px;
}

.fold-card-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #E5E5E5;
}

.fold-card-footer .button {
  background-color: #7386D5;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  text-decoration: none;
}

在这里，我们添加了头部、内容和脚部的背景颜色、文本样式和按钮样式。

添加过渡效果

为了使卡片组件更加生动，我们将使用 Vue 过渡和动画效果。这将为组件在页面中的出现和消失添加平滑的过渡。

首先，在 main.js 中添加以下代码：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

然后，我们将在 App.vue 的 d477f9ce7bf77f53fbcf36bec1b69b7a 中使用 300ff3b250bc578ac201dd5fb34a0004 标记来添加过渡效果：

<template>
  <div id="app">
    <div class="container">
      <transition name="fold">
        <FoldCard v-if="showCard" @close-card="closeCard">
          <p>{{ description }}</p>
        </FoldCard>
      </transition>
      <button class="button" @click="showCard = true">显示折角卡片</button>
    </div>
  </div>
</template>

在这里，我们使用了 Vue 的 v-if 实现动态显示和隐藏卡片组件。我们还为 300ff3b250bc578ac201dd5fb34a0004 设置了名称 fold，以实现平滑的折角过渡。最后，我们使用了 @close-card 事件来关闭卡片。

添加动画

为了使用动画效果，在 App.vue 中添加以下样式：

.fold-enter-active,
.fold-leave-active {
  transition-duration: 0.3s;
  transition-property: transform, opacity;
  transition-timing-function: ease;
}

.fold-enter {
  opacity: 0;
  transform: translateX(100%) rotate(45deg);
}

.fold-leave-to {
  opacity: 0;
  transform: translateX(100%) rotate(45deg);
}

在这里，我们为过渡添加了动画，包括旋转和平移等动画效果。

好了，现在，我们已经完成了折角卡片组件的设计和实现。您可以自己尝试一下，看看效果如何。在使用时，您只需向组件传递 title、description 和 buttonTextrrreee

Ce composant contient tous les éléments de base du composant de carte écorné, y compris un titre d'en-tête de carte, une description, un bouton de fermeture et un bouton pour indiquer l'action que l'utilisateur doit effectuer. Nous avons également ajouté une méthode appelée closeCard() pour fermer la carte. 🎜🎜Nous utiliserons également Font Awesome pour ajouter une icône de fermeture. Pour utiliser Font Awesome, vous devez ajouter le code suivant à index.html de votre projet Vue CLI3. 🎜rrreee🎜 Implémentation des oreilles de chien 🎜🎜Maintenant, nous allons ajouter les oreilles de chien. Pour ce faire, nous devons ajouter un pseudo-élément à deux coins adjacents de la carte. 🎜rrreee🎜Nous utilisons boder-style pour créer une barre oblique avec une largeur et une hauteur nulles, lui permettant de couvrir les quatre coins. Nous utilisons également border-color pour spécifier la couleur des coins. 🎜🎜Ajouter des styles🎜🎜Nous utiliserons des styles CSS pour ajouter des styles à tous les éléments de fold-card afin qu'ils apparaissent sous forme de cartes sur la page : 🎜rrreee🎜Ici, nous avons ajouté la carte Basic styles, y compris la bordure arrondie, l'effet d'ombre et la couleur d'arrière-plan de la carte. 🎜🎜Ensuite, nous ajouterons des styles pour l'en-tête, le contenu et le pied de page de la carte : 🎜rrreee🎜Ici, nous avons ajouté la couleur d'arrière-plan, le style du texte et le style des boutons pour l'en-tête, le contenu et le pied de page. 🎜🎜Ajouter des effets de transition🎜🎜Pour rendre le composant de la carte plus vivant, nous utiliserons les effets de transition et d'animation Vue. Cela ajoutera des transitions fluides à mesure que le composant apparaît et disparaît de la page. 🎜🎜Tout d'abord, ajoutez le code suivant dans main.js : 🎜rrreee🎜Ensuite, nous ajouterons le code suivant dans App.vue Utilisez le <transition&gt ; pour ajouter des effets de transition : 🎜rrreee🎜Ici, nous utilisons le v-if de Vue pour afficher et masquer dynamiquement le composant de la carte. Nous avons également défini le nom fold pour le 300ff3b250bc578ac201dd5fb34a0004 afin d'obtenir une transition de coin en douceur. Enfin, nous utilisons l'événement @close-card pour fermer la carte. 🎜🎜Ajouter une animation🎜🎜Pour utiliser des effets d'animation, ajoutez le style suivant dans App.vue : 🎜rrreee🎜Ici, nous avons ajouté des animations à la transition, y compris des effets d'animation tels que la rotation et la translation. . 🎜🎜D'accord, nous avons maintenant terminé la conception et la mise en œuvre du composant de la carte de coin. Vous pouvez l'essayer vous-même et voir comment ça se passe. Lors de son utilisation, vous transmettez simplement les propriétés title, description et buttonText au composant. 🎜

Il ne suffit pas d'implémenter le composant carte, vous devez également l'ajouter à votre application afin que les utilisateurs puissent le voir et l'utiliser. Dans cet exemple, App.vue contient un bouton qui active ou désactive le composant de la carte à oreilles de chien.

Cela termine le didacticiel sur la façon d'utiliser Vue pour implémenter le composant de carte de coin. J'espère que cet exemple simple pourra vous aider à maîtriser rapidement les bases de Vue.js, et servira également de référence pour vos futurs projets de développement.

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!