npm package: @moment-design/upload-material
Description: 上传素材组件
Author: lean
Latest version: 0.1.14

# 上传素材组件

## 使用组件

`安装依赖`

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

`使用组件`

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

Events

| 事件名 | 描述       | 参数                  |
| ------ | ---------- | --------------------- |
| choose | 选中的数据 | (v: any[], item: any) |

Expose

| 事件名 | 描述             | 参数                     |
| ------ | ---------------- | ------------------------ |
| open   | 主动触发打开弹窗 | 默认数据：(datas: any[]) |