Vue 3 组件开发：让业务组件动起来

2023-10-12 22:20:05

从无到有的组件开发

在现代 Web 应用程序中，业务组件对于提供交互式且有吸引力的用户界面至关重要。步骤条组件就是一个突出的例子，它可视化地引导用户完成任务或过程。然而，为了让这些组件真正脱颖而出，添加动画效果是必不可少的。

CSS 过渡的力量

CSS 过渡是一种强大的工具，可用于在元素状态改变时创建流畅的动画。在 Vue 3 中，我们可以使用 transition 属性为组件应用过渡。例如，我们可以创建一个过渡，当步骤条中的步骤被激活时改变其背景色。

<template>
  <div class="step-bar">
    <div class="step-item" v-for="step in steps" :key="step.id">
      <span>{{ step.title }}</span>
    </div>
  </div>
</template>

<style>
.step-item {
  transition: background-color 0.2s ease-in-out;
}

.step-item.active {
  background-color: #007bff;
}
</style>

CSS 动画的魅力

对于更复杂的动画，我们可以使用 CSS 动画。CSS 动画允许我们创建自定义动画，包括设置关键帧、持续时间和延迟。在 Vue 3 中，我们可以使用 animation 属性为组件应用动画。例如，我们可以创建一个动画，当步骤条中的步骤被激活时使其缩放到更大尺寸。

<template>
  <div class="step-bar">
    <div class="step-item" v-for="step in steps" :key="step.id">
      <span>{{ step.title }}</span>
    </div>
  </div>
</template>

<style>
.step-item {
  animation: scale-up 0.2s ease-in-out;
}

@keyframes scale-up {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.2);
  }
}
</style>

Vuex 集成

为了管理步骤条的状态，我们可以使用 Vuex。Vuex 是一个状态管理库，允许我们在 Vue 应用程序中存储和共享状态。通过将步骤条组件与 Vuex 集成，我们可以跟踪激活的步骤并根据需要触发动画。

// store.js
import { createStore } from 'vuex'

const store = createStore({
  state: {
    activeStep: 0
  },
  mutations: {
    setActiveStep(state, step) {
      state.activeStep = step
    }
  }
})

export default store

<template>
  <div class="step-bar">
    <div class="step-item" v-for="step in steps" :key="step.id" @click="activateStep(step)">
      <span>{{ step.title }}</span>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState([
      'activeStep'
    ]),
  },
  methods: {
    ...mapMutations([
      'setActiveStep'
    ]),
    activateStep(step) {
      this.setActiveStep(step.id)
    }
  }
}
</script>