Vue를 사용하여 코너 카드 구성 요소를 구현하는 방법은 무엇입니까?

웹 개발에서 카드 레이아웃은 항상 인기 있는 디자인 트렌드 중 하나였습니다. 이제 점점 더 많은 애플리케이션이 Vue.js를 사용하기 시작하면서 개발자들은 Vue.js를 사용하여 카드 구성 요소를 구현하는 방법도 탐색하기 시작했습니다.

이 글에서는 Vue.js를 사용하여 코너 카드 컴포넌트를 구현하는 방법을 소개하고 전환 효과를 추가하여 카드 컴포넌트를 더욱 생생하게 만드는 방법도 보여줍니다.

개귀카드 구성요소란 무엇인가요?

Cornered Card 구성 요소는 다음과 같이 카드의 상단 모서리를 접어 독특한 모양을 만드는 시각적으로 매력적인 UI 디자인입니다.

9cc3358c2fa2c5697401e403c726ad39

Corner Card Component에는 일반적으로 제목과 설명, 사용자에게 특정 작업을 안내하는 버튼이 있습니다. 이 기사에서는 간단한 접힌 카드 구성 요소를 구현하고 전환 효과를 추가하여 페이지 요소가 보다 원활하게 나타나고 숨겨지도록 하겠습니다.

준비

코드 구현을 시작하기 전에 다음을 준비해야 합니다.

• Vue CLI3: 이는 새로운 Vue 애플리케이션을 쉽게 만드는 데 도움이 됩니다.
• FontAwesome: 이것은 우리가 사용하는 벡터 아이콘 라이브러리가 될 것입니다.
• 코드 편집기: Visual Studio Code 또는 Sublime Text와 같이 널리 사용되고 사용하기 쉬운 텍스트 편집기를 사용하는 것이 좋습니다.

좋아, 시작해 보자!

Vue 애플리케이션 만들기

Vue CLI3을 사용하여 새로운 Vue 애플리케이션을 만드는 것이 가장 빠르고 편리한 방법입니다. 먼저 Vue CLI3이 로컬에 설치되어 있는지 확인하세요. 그렇지 않은 경우 다음 명령을 사용하여 설치하십시오.

npm install -g @vue/cli

설치가 완료되면 다음 명령을 사용하여 새 Vue 애플리케이션을 만들 수 있습니다.

vue create my-app

여기서 "my-app"은 프로젝트 이름입니다. 명령줄에서 올바른 디렉터리로 변경하고 my-app을 원하는 이름으로 변경했는지 확인하세요.

Vue CLI3은 폴더에 몇 가지 기본 템플릿과 파일이 포함된 새 Vue 애플리케이션을 자동으로 생성합니다.

Corner Card 구성 요소 만들기

Corner Card 구성 요소를 만들기 위해 Vue 템플릿에 새 구성 요소를 추가하겠습니다. 이 구성 요소에는 제목, 설명, 버튼 등 카드의 모든 요소가 포함됩니다. FoldCard.vue라는 새로운 Vue 단일 파일 구성 요소(SFC)를 만드는 것부터 시작해 보겠습니다. 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

이 구성 요소에는 카드 헤더 제목, 설명, 닫기 버튼, 사용자가 수행해야 하는 작업을 나타내는 버튼 등 접힌 카드 구성 요소의 모든 기본 요소가 포함되어 있습니다. 또한 카드를 닫는 closeCard()라는 메서드를 추가했습니다. 🎜🎜Font Awesome을 사용하여 닫기 아이콘도 추가하겠습니다. Font Awesome을 사용하려면 Vue CLI3 프로젝트의 index.html에 다음 코드를 추가해야 합니다. 🎜rrreee🎜모따기 구현🎜🎜이제 모따기를 추가해 보겠습니다. 이렇게 하려면 카드의 인접한 두 모서리에 의사 요소를 추가해야 합니다. 🎜rrreee🎜 boder-style을 사용하여 너비와 높이가 0인 슬래시를 만들어 네 모서리를 모두 덮을 수 있습니다. 또한 border-color를 사용하여 모서리 색상을 지정합니다. 🎜🎜스타일 추가🎜🎜CSS 스타일을 사용하여 fold-card의 모든 요소에 스타일을 추가하여 페이지에 카드로 표시되도록 하겠습니다. 🎜rrreee🎜여기서 Basic 카드를 추가했습니다. 둥근 테두리, 그림자 효과 및 카드의 배경색을 포함한 스타일. 🎜🎜다음으로 카드의 머리글, 내용, 바닥글에 스타일을 추가하겠습니다. 🎜rrreee🎜여기서 머리글, 내용, 바닥글의 배경색, 텍스트 스타일, 버튼 스타일을 추가했습니다. 🎜🎜전환 효과 추가🎜🎜카드 구성 요소를 더욱 생생하게 만들기 위해 Vue 전환 효과와 애니메이션 효과를 사용하겠습니다. 이렇게 하면 구성 요소가 페이지에 나타나고 사라질 때 부드러운 전환이 추가됩니다. 🎜🎜먼저 main.js에 다음 코드를 추가합니다. 🎜rrreee🎜그런 다음 App.vue에 다음 코드를 추가합니다. <transition&gt을 사용하세요. ; 태그로 전환 효과 추가: 🎜rrreee🎜여기서 Vue의 v-if를 사용하여 카드 구성 요소를 동적으로 표시하고 숨깁니다. 또한 부드러운 모서리 전환을 달성하기 위해 300ff3b250bc578ac201dd5fb34a0004에 대해 fold라는 이름을 설정했습니다. 마지막으로 @close-card 이벤트를 사용하여 카드를 닫습니다. 🎜🎜애니메이션 추가🎜🎜애니메이션 효과를 사용하려면 App.vue에 다음 스타일을 추가하세요. 🎜rrreee🎜여기서는 회전, 이동 등의 애니메이션 효과를 포함하여 전환에 애니메이션을 추가했습니다. . 🎜🎜자, 이제 코너 카드 컴포넌트의 디자인과 구현이 완료되었습니다. 직접 시도해보고 어떻게 진행되는지 확인할 수 있습니다. 이를 사용할 때 title, description 및 buttonText 속성을 ​​구성 요소에 전달하기만 하면 됩니다. 🎜

카드 컴포넌트를 구현하는 것만으로는 충분하지 않으며, 사용자가 보고 사용할 수 있도록 앱에 추가해야 합니다. 이 경우 App.vue에는 접힌 카드 구성 요소를 켜거나 끄는 버튼이 포함되어 있습니다.

이것으로 Vue를 사용하여 코너 카드 구성 요소를 구현하는 방법에 대한 튜토리얼이 종료됩니다. 이 간단한 예제가 Vue.js의 기본 사항을 빠르게 익히는 데 도움이 되고 향후 개발 프로젝트에 참고 자료로도 활용되기를 바랍니다.

위 내용은 Vue를 사용하여 코너 카드 구성 요소를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!