vue3.2图片上传Demo搭建 5 修改文件名

长沙xtt

已于 2022-05-20 01:38:00 修改

阅读量424

点赞数

分类专栏： vue3 文章标签： vue.js javascript elementui

于 2022-05-19 23:53:51 首次发布

本文链接：https://blog.csdn.net/weixin_40746230/article/details/124867977

版权

这个博客介绍了如何在Vue.js应用中创建和使用模态框组件，包括文件重命名功能。在MyFiles.vue组件中，实现了文件列表的显示、排序、搜索以及删除功能。当选择一个文件后，可以通过模态框进行重命名，并且在FileRenameForm组件中利用v-focus指令自动聚焦到输入字段。此外，还展示了如何全局注册组件和使用axios进行API调用处理文件操作。

摘要由CSDN通过智能技术生成

新建Model.vue

<template>
  <div v-if="show">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">{
  { title }}</h5>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
                @click="$emit('hide')"
              ></button>
            </div>
            <div class="modal-body">
              <slot />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    required: true,
  },
  show: {
    type: Boolean,
    default: false,
  },
});
</script>

<style scoped>
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}
</style>

全局使用

import { createApp } from 'vue'
import App from './App.vue'

import icons from './components/icons/all'
import  Modal from './components/Model.vue'
const app=createApp(App)
// app.component("icon-upload",IconUpload) //注册全局组件

for(const[ key,value] of Object.entries(icons)){
    app.component(key,value)
}//注册全局组件

app.component("app-modal",Modal);
app.mount('#app')

ActionBar.vue 添加点击emit

<template>

    <div class="d-flex
 justify-content-between 
 align-items-center 
 border-bottom 
 pt-2 
 pb-3">

        <button class="btn btn-outline-primary">
            <icon-upload />上传
        </button>
        <div class="action-buttons" v-show="selectedItems.length">
            <button type="button" class="rounded-button" title="Rename" @click="$emit('rename')"  v-show="selectedItems.length===1">