@moment-design/upload-material NPM

上传素材组件

使用组件

安装依赖

npm install @moment-design/upload-material --save

使用组件

<template>
  <!-- 按钮 -->
  <m-space>
    <m-button type="primary" @click="open">上传素材</m-button>
  </m-space>
  <!-- 组件 -->
  <UploadMaterial ref="refUploadMaterial" :config="config" @choose="choose"></UploadMaterial>
  <!-- 数据 -->
  <div style="margin-top: 16px">
    已选数据:
    {{ data }}
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import UploadMaterial from '@moment-design/material-library';
import '@moment-design/material-library/dist/css/index.css';
import '@moment-design/material-library/dist/css/index.less';
import {deleteFile, deleteGroup, getFileList, getGroupList, moveFile, postGroup, uploadFile} from "./api";

const refUploadMaterial = ref();
const config = {
    apis: {
        getGroupList,
        deleteGroup,
        getFileList,
        postGroup,
        deleteFile,
        moveFile,
        uploadFile,
    },
};
const data = ref();
const open = () => {
  refUploadMaterial.value.open(data.value);
};
const choose = (v: any) => {
  data.value = v;
};
</script>

API

Props

参数名	描述	类型	默认值
fileType	素材类型限制	number	1图片,2文档,3视频,4音乐
tab	指定显示图片、链接、视频	number	1图片,2链接,3视频
hideTab	隐藏 tabs	boolean	false
max	选择素材最大数量	number	10
dialog	列表、弹窗样式	DialogConfig	{}
scroll	左侧分组、右侧内容滚动条高度	ScrollConfig	{}
apis	素材库相关接口	ApisConfig	{}

DialogConfig

参数名	描述	类型	默认值
title	弹窗标题	string	选择素材
visible	列表(false)、弹窗(true)样式	boolean	false
width	弹出框宽度	number	1160

ScrollConfig

参数名	描述	类型	默认值
left	左侧分组滚动条高度	string	'430px'
right	右侧内容滚动条高度	string	'430px'

ApisConfig

参数名	描述	类型	默认值
getGroupList	获取分组列表	api	-
postGroup	新增、编辑分组	api	-
deleteGroup	删除分组	api	-
getFileList	获取分组下素材列表	api	-
deleteFile	删除分组下的素材	api	-
moveFile	移动分组	api	-
uploadFile	上传素材	api	-