使用Vue Element实现新建文件夹

在Vue.js中，结合Element UI库，我们可以创建一个文件夹管理功能，其中包含一个用于新建文件夹的功能。首先，你需要安装Element UI和Vue Router（如果项目中还没有的话），然后可以按照以下步骤实现：

1. 安装依赖：

npm install element-ui vue-router

2. 引入必要的组件和指令：

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

3. 创建一个`FileFolderCreate.vue`组件，展示表单并处理提交事件：

<template>
  <el-form :model="folderForm" @submit.prevent="createFolder">
    <el-row>
      <el-col :span="8">
        <el-form-item label="文件夹名称">
          <el-input v-model="folderForm.name"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-button type="primary" @click="createFolder">新建</el-button>
    <el-button @click="cancel">取消</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      folderForm: {
        name: '',
      },
    };
  },
  methods: {
    createFolder() {
      // 这里假设你有一个API来创建新文件夹，实际应用中替换为对应的接口请求
      if (this.folderForm.name) {
        axios.post('/api/folders', this.folderForm).then(response => {
          console.log('成功创建文件夹:', response);
          // 更新状态或跳转到新的页面
        }).catch(error => {
          console.error('创建失败:', error);
        });
      }
    },
    cancel() {
      this.folderForm.name = '';
    },
  },
};
</script>

4. 将这个组件注册到路由中，以便用户访问：

import { createWebHistory, Router } from 'vue-router';
import FileFolderCreate from './components/FileFolderCreate.vue';

const routes = [
  // 其他路由...
  {
    path: '/create-folder',
    component: FileFolderCreate,
  },
];

const router = new Router({
  history: createWebHistory(),
  routes,
});

// 然后将router挂载到Vue实例上
new Vue({ router }).$mount('#app');