ResourceManagement

云端资源管理组件

运行环境

| 名称 | 版本号 | | ---------------------- | ------ | | Node.js | 15+ | | NPM | 7+ | | Vue.js | 3+ | | @moment-design/web-vue | 1+ |

API说明

初始化

| 参数名 | 描述 | 类型 | 必须 | 默认值 | | ------------- | ------------------ | ------------- | ---- | ------ | | baseUrl | 云资源请求域名 | string | 是 | - | | errorCallback | 云资源请求错误回调 | (err) => void | 是 | - | | getXToken | 云资源请求x-token | () => string | 是 | - |

函数调用

| 参数名 | 描述 | 类型 | 必须 | 默认值 | | ----------- | ----------------------------------- | ----------------------- | ---- | ------ | | type | 文件类型，image：图片，video：视频 | string | 否 | image | | limit | 多选数量限制，0：无限制 | number | 否 | 1 | | uploadLimit | 上传文件数量限制，0：无限制 | number | 否 | 0 | | uploadSize | 上传文件大小限制，单位MB，0：无限制 | number | 否 | 0 | | confirm | 回调函数 | (fileList: []) => void; | 是 | - |

使用组件

1. 安装依赖

   npm install @moment-design/resource-management --save

2. 引用组件

   在main.ts中全局引入组件

   import { createApp } from "vue";
   import app from "./App.vue";
   import TheFileManager from '@moment-design/resource-management';
      
   const App = createApp(app);
   App.use(TheFileManager,{
       baseUrl: "",
       errorCallback: (err) => {
           console.error("=========errorCallback=============", err)
     	},
       getXToken: () => {
           return ""
       }
   });
      

3. 函数调用

   <template>
     <m-button @click="onShow(1)">点击选择1张图片</m-button>
     <p>{{ list1 }}</p>
      
     <m-button @click="onShow(2)">点击选择多张图片</m-button>
     <p>{{ list2 }}</p>
      
     <m-button @click="onShow(3)">点击选择视频</m-button>
     <p>{{ list3 }}</p>
   </template>
   <script lang="ts" setup>
   import { ref } from '@vue/runtime-core';
   import theFileManager from '@moment-design/resource-management';
      
   const list1 = ref<any>([]);
   const list2 = ref<any>([]);
   const list3 = ref<any>([]);
      
   const onShow = (index: number): void => {
     theFileManager.show({
       type: index === 3 ? 'video' : 'image',
       limit: index === 2 ? 0 : 1,
       confirm: (fileList: any[]) => {
         if (index === 1) {
           list1.value = fileList;
         }
         if (index === 2) {
           list2.value = fileList;
         }
         if (index === 3) {
           list3.value = fileList;
         }
       },
     });
   };
   </script>