素材库组件

使用组件

安装依赖

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

使用组件

import MaterialLibrary from "@moment-design/material-library"

<MaterialLibrary
  ref="refLMaterialLibrary"
  :config="config"
  @choose="(v) => (chooseDatas = v)"
></MaterialLibrary>

API

Props

| 参数名 | 描述 | 类型 | 默认值 | | -------------- | ---------------------------- | ----------------------------- | ------------------------------- | | fileType | 素材类型限制 | number | 1[图片],2[文档],3[视频],4[音乐] | | max | 素材最大数量 | number | 10 | | dialog | 列表、弹窗样式 | DialogConfig | {} | | scroll | 左侧分组、右侧内容滚动条高度 | ScrollConfig | {} | | apis | 素材库相关接口 | ApisConfig | {} | | customValidate | 自定义校验函数 | (datas) => (true 或 报错信息) | - |

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 | 选中的素材 | (datas: any[]) |

Expose

| 事件名 | 描述 | 参数 | | ------ | ---------------------- | ---- | | open | 主动触发打开选择素材库 | - |

示例数据

const config = {
  dialog: {
    visible: false,
    title: '选择素材',
    width: 1160,
  },
  scroll: {
    left: '560px',
    right: '560px',
  },
  fileType: 1,
  apis: useMaterialApis(),
};

const useMaterialApis = {
  getGroupList,
  postGroup,
  deleteGroup,
  getFileList,
  deleteFile,
  moveFile,
  uploadFile,
};

Interface

export interface IMaterialLibrary {
  dialog: {
    visible: boolean,
    title?: string,
    width?: number,
  };
  scroll?: {
    left?: string,
    right?: string,
  };
  fileType?: 1 | 2 | 3 | 4;
  apis: {
    getGroupList: any,
    postGroup: any,
    deleteGroup: any,
    getFileList: any,
    deleteFile: any,
    moveFile: any,
    uploadFile: any,
  };
}