@moment-design/resource-management

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>