@moment-design/material-library NPM

素材库组件

使用组件

安装依赖

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,
  };
}

vue moment-design

axios js-cookie vue-docgen-api

@moment-design/upload-material @moment-design/user-avatar-group @moment-design/choose-activity @moment-design/choose-mini-link @moment-design/choose-red-packet

7 months ago

8 months ago

8 months ago

8 months ago