Wie implementiert man die Eckkartenkomponente mit Vue?

In der Webentwicklung war das Kartenlayout schon immer einer der beliebtesten Designtrends. Da immer mehr Anwendungen Vue.js verwenden, beginnen Entwickler auch damit, zu erkunden, wie Vue.js zur Implementierung von Kartenkomponenten verwendet werden kann.

In diesem Artikel erfahren Sie, wie Sie mit Vue.js die Eckkartenkomponente implementieren und wie Sie die Kartenkomponente durch Hinzufügen von Übergangseffekten lebendiger gestalten.

Was ist eine Eselsohr-Kartenkomponente?

Die Cornered Card-Komponente ist ein optisch ansprechendes UI-Design, das durch Falten der oberen Ecken der Karte eine einzigartige Form erzeugt, wie folgt:

Corner Card Component hat normalerweise einen Titel und eine Beschreibung sowie eine Schaltfläche, die den Benutzer zu einer bestimmten Aktion führt. In diesem Artikel implementieren wir eine einfache Eselsohr-Kartenkomponente und fügen Übergangseffekte hinzu, damit Seitenelemente reibungsloser angezeigt und ausgeblendet werden.

Vorbereitung

Bevor Sie mit der Implementierung des Codes beginnen, müssen Sie Folgendes vorbereiten:

• Vue CLI3: Dadurch können wir problemlos eine neue Vue-Anwendung erstellen.
• FontAwesome: Dies wird die Vektorsymbolbibliothek sein, die wir verwenden.
• Code-Editor: Es wird empfohlen, einen beliebten und benutzerfreundlichen Texteditor wie Visual Studio Code oder Sublime Text zu verwenden.

Okay, fangen wir an!

Eine Vue-Anwendung erstellen

Das Erstellen einer neuen Vue-Anwendung mit Vue CLI3 ist der schnellste und bequemste Weg. Stellen Sie zunächst sicher, dass Vue CLI3 lokal installiert ist. Wenn nicht, verwenden Sie bitte den folgenden Befehl, um es zu installieren:

npm install -g @vue/cli

Sobald die Installation abgeschlossen ist, können Sie den folgenden Befehl verwenden, um eine neue Vue-Anwendung zu erstellen:

vue create my-app

Hier ist „my-app“ Ihr Projektname. Stellen Sie sicher, dass Sie in der Befehlszeile in das richtige Verzeichnis wechseln und my-app in den gewünschten Namen ändern.

Vue CLI3 erstellt automatisch eine neue Vue-Anwendung in Ihrem Ordner, die einige grundlegende Vorlagen und Dateien enthält.

Erstellen Sie die Corner Card-Komponente

Um die Corner Card-Komponente zu erstellen, fügen wir der Vue-Vorlage eine neue Komponente hinzu. Diese Komponente enthält alle Elemente der Karte, einschließlich Titel, Beschreibung und Schaltflächen. Beginnen wir mit der Erstellung einer neuen Vue Single File Component (SFC) mit dem Namen 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 的 <template> 中使用 <transition> 标记来添加过渡效果：

<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 实现动态显示和隐藏卡片组件。我们还为 <transition> 设置了名称 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

Diese Komponente enthält alle Grundelemente der Eselsohrkarten-Komponente, einschließlich eines Kartenkopftitels, einer Beschreibung, einer Schaltfläche zum Schließen und einer Schaltfläche, die die Aktion angibt, die der Benutzer ausführen soll. Wir haben außerdem eine Methode namens closeCard() hinzugefügt, um die Karte zu schließen. 🎜🎜Wir werden auch Font Awesome verwenden, um ein Schließsymbol hinzuzufügen. Um Font Awesome zu verwenden, müssen Sie den folgenden Code zu index.html Ihres Vue CLI3-Projekts hinzufügen. 🎜rrreee🎜Implementieren der Fasen🎜🎜Jetzt werden wir die Fasen hinzufügen. Dazu müssen wir an zwei benachbarten Ecken der Karte ein Pseudoelement hinzufügen. 🎜rrreee🎜Wir verwenden boder-style, um einen Schrägstrich mit einer Breite und Höhe von Null zu erstellen, sodass er alle vier Ecken abdecken kann. Wir verwenden auch border-color, um die Farbe der Ecken anzugeben. 🎜🎜Stile hinzufügen🎜🎜Wir werden CSS-Stile verwenden, um allen Elementen in fold-card Stile hinzuzufügen, sodass sie als Karten auf der Seite angezeigt werden: 🎜rrreee🎜Hier haben wir die Karte Basic hinzugefügt Stile, einschließlich abgerundetem Rand, Schatteneffekt und Hintergrundfarbe der Karte. 🎜🎜Als nächstes fügen wir Stile für die Kopfzeile, den Inhalt und die Fußzeile der Karte hinzu: 🎜rrreee🎜Hier haben wir die Hintergrundfarbe, den Textstil und den Schaltflächenstil für die Kopfzeile, den Inhalt und die Fußzeile hinzugefügt. 🎜🎜Übergangseffekte hinzufügen🎜🎜Um die Kartenkomponente lebendiger zu gestalten, verwenden wir Vue-Übergangs- und Animationseffekte. Dadurch werden sanfte Übergänge hinzugefügt, wenn die Komponente auf der Seite erscheint und verschwindet. 🎜🎜Fügen Sie zunächst den folgenden Code in main.js hinzu: 🎜rrreee🎜Dann fügen wir den folgenden Code in App.vue hinzu. Verwenden Sie den <transition&gt ;-Tag zum Hinzufügen von Übergangseffekten: 🎜rrreee🎜Hier verwenden wir Vues v-if, um die Kartenkomponente dynamisch anzuzeigen und auszublenden. Wir legen auch den Namen fold für den <transition> fest, um einen sanften Eckübergang zu erreichen. Schließlich verwenden wir das Ereignis @close-card, um die Karte zu schließen. 🎜🎜Animation hinzufügen🎜🎜Um Animationseffekte zu verwenden, fügen Sie den folgenden Stil in App.vue hinzu: 🎜rrreee🎜Hier haben wir dem Übergang Animationen hinzugefügt, einschließlich Animationseffekten wie Drehung und Übersetzung . 🎜🎜Okay, jetzt haben wir das Design und die Implementierung der Eckkartenkomponente abgeschlossen. Sie können es selbst ausprobieren und sehen, wie es läuft. Bei der Verwendung übergeben Sie einfach die Eigenschaften title, description und buttonText an die Komponente. 🎜

Die bloße Implementierung der Kartenkomponente reicht nicht aus, Sie müssen sie auch zu Ihrer App hinzufügen, damit Benutzer sie sehen und verwenden können. In diesem Fall enthält das App.vue eine Schaltfläche, die die Eselsohr-Kartenkomponente ein- oder ausschaltet.

Damit endet das Tutorial zur Verwendung von Vue zum Implementieren der Eckkartenkomponente. Ich hoffe, dass dieses einfache Beispiel Ihnen dabei helfen kann, die Grundlagen von Vue.js schnell zu erlernen, und dass es auch als Referenz für Ihre zukünftigen Entwicklungsprojekte dienen wird.

Das obige ist der detaillierte Inhalt vonWie implementiert man die Eckkartenkomponente mit Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!