上传素材组件

使用组件

安装依赖

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

Events

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

Expose

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