@moment-design/resource-management-java NPM

ResourceManagement

云端资源管理组件

运行环境

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

API 说明

初始化

参数名	描述	类型	必须	默认值
baseUrl	云资源请求域名	string	是	-
prefix	接口请求前缀	string	否	/api/store/system
cdnDomain	拼接图片域名	string	是	-
errorCallback	云资源请求错误回调	(err) => void	是	-
getToken	云资源请求 token	() => string	是	-
getTenantId	商户 ID	() => string	是	-

函数调用

参数名	描述	类型	必须	默认值
type	文件类型，image：图片，audio：音频，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-java --save

引用组件

在main.ts中全局引入组件

import { createApp } from 'vue';
import app from './App.vue';
import TheFileManager from '@moment-design/resource-management-java';
import '@moment-design/resource-management-java/dist/css/index.css';

const App = createApp(app);
App.use(TheFileManager, {
  cdnDomain: 'https://syycdn.dongchali.net',
  baseUrl: '',
  errorCallback: (err) => {
    console.error('=========errorCallback=============', err);
  },
  getToken: () => {
    return '';
  },
  getTenantId: () => {
    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-java';

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

@everything-registry/sub-chunk-615

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago