vue3.0/vite/typescript 重写 upload 组件新姿势！助力开发提效

前端

2023-12-16 21:13:00

使用 Vue 3/Vite/TypeScript 重写上传组件

摘要

在这篇文章中，我们将指导您如何利用 Vue 3、Vite 和 TypeScript 的强大功能来重写一个上传组件。我们将探讨这个过程的各个方面，从安装依赖项到使用组件，同时还提供代码示例和最佳实践。

引言

上传组件是现代 web 开发中至关重要的元素，它允许用户轻松安全地上传文件。通过使用 Vue 3 的响应性、Vite 的快速构建速度和 TypeScript 的类型安全性，我们可以创建一个高效且可维护的上传组件。

安装依赖项

要开始，我们需要安装必要的依赖项：

npm install vue3 vite typescript --save-dev

创建项目

接下来，让我们创建一个新的 Vue 项目：

vue create upload-component

重写上传组件

现在，让我们进入最重要的部分 - 重写上传组件。

在 src 目录下，创建一个名为 components 的文件夹，并在该文件夹下创建一个 Upload.vue 文件。以下是该组件的代码：

<template>
  <div class="upload-component">
    <input type="file" multiple @change="handleFileChange">
    <button @click="handleUpload">上传</button>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'

export default {
  setup() {
    const files = ref([])

    const handleFileChange = (e: Event) => {
      const target = e.target as HTMLInputElement
      if (target.files) {
        files.value = Array.from(target.files)
      }
    }

    const handleUpload = () => {
      // 上传文件逻辑
    }

    return {
      files,
      handleFileChange,
      handleUpload
    }
  }
}
</script>

<style>
.upload-component {
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-component input[type="file"] {
  display: none;
}

.upload-component button {
  margin-left: 10px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
}
</style>

使用组件

现在，我们的组件已经准备好了，让我们在 App.vue 文件中导入并使用它：

<template>
  <div>
    <Upload />
  </div>
</template>

<script lang="ts">
import Upload from './components/Upload.vue'

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