@moment-design/resource-management NPM

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;	是	-

使用组件

安装依赖

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

引用组件

在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 ""
    }
});

函数调用

<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>

vue moment-design

@syyfe/request nanoid

@infinitebrahmanuniverse/nolb-_mom @everything-registry/sub-chunk-615 @zalastax/nolb-_mom

3 years ago

3 years ago

3 years ago

3 years ago