Vue 3 组件开发：打造 Toast 组件库

2024-02-18 22:42:52

前言

构建组件库是一项颇具挑战性的任务，它需要对组件的设计、实现和维护有着深入的理解。然而，组件库一旦构建成功，它将成为您开发其他项目的宝贵资产。它可以帮助您提高开发效率，并确保组件的一致性和质量。

搭建开发环境

在开始构建 Toast 组件库之前，我们需要搭建好开发环境。首先，我们需要安装 Node.js 和 npm。然后，我们可以使用以下命令来安装 Vue 3、TypeScript 和 Vite：

npm install -g @vue/cli
npm install vue@next
npm install typescript
npm install vite

接下来，我们需要创建一个新的 Vue 3 项目。我们可以使用以下命令来做到这一点：

vue create toast-component-library

创建 Toast 组件

现在，我们可以开始创建 Toast 组件了。首先，我们需要在 src/components 目录下创建一个新的文件夹 Toast。然后，在这个文件夹中创建一个名为 Toast.vue 的文件。

// src/components/Toast/Toast.vue

<template>
  <div class="toast" :class="{'toast--active': active}">
    <div class="toast__content">
      <slot />
    </div>
    <button class="toast__close-button" @click="close">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="toast__close-icon">
        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'Toast',

  props: {
    message: {
      type: String,
      required: true
    },
    duration: {
      type: Number,
      default: 3000
    },
    type: {
      type: String,
      default: 'info'
    }
  },

  setup(props) {
    const active = ref(false)

    const close = () => {
      active.value = false
    }

    setTimeout(() => {
      active.value = true
    }, 100)

    setTimeout(() => {
      close()
    }, props.duration)

    return {
      active,
      close
    }
  }
}
</script>

<style>
.toast {
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16px;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.toast--active {
  opacity: 1;
}

.toast__content {
  padding: 0 12px;
}

.toast__close-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.toast__close-icon {
  width: 16px;
  height: 16px;
  fill: #fff;
}
</style>

使用 Toast 组件

现在，我们已经创建好了 Toast 组件。我们可以通过以下代码在我们的 Vue 应用程序中使用它：

<template>
  <Toast message="Hello, world!" />
</template>

<script>
import Toast from './components/Toast/Toast.vue'

export default {
  components: {
    Toast
  }
}
</script>