# @aliretail/react-material-selector
> 素材选择
Latest version **1.0.27** (published 2021-08-16) · MIT license · 0 weekly downloads
## Install
```sh
npm install @aliretail/react-material-selector
pnpm add @aliretail/react-material-selector
yarn add @aliretail/react-material-selector
bun add @aliretail/react-material-selector
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.27 |
| Published | 2021-08-16 |
| First published | 2021-05-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 270 KB |
| Known vulnerabilities | 0 (+23 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | aliretail |
| Keywords | aliretail, react, component |
## Links
- npm: https://www.npmjs.com/package/@aliretail/react-material-selector
- Homepage: https://unpkg.com/@aliretail/react-material-selector@1.0.27/build/index.html
- npm.io page: https://npm.io/package/@aliretail/react-material-selector
## Dependencies (2)
- [axios](https://npm.io/package/axios.md) ^0.21.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.0.27 (latest) — 2021-08-16
- 1.0.28-alpha.2 (alpha) — 2021-08-19
- 1.0.28-alpha.1 — 2021-08-19
- 1.0.27-alpha.1 — 2021-08-16
- 1.0.26 — 2021-08-16
- 1.0.26-alpha.8 — 2021-08-16
- 1.0.26-alpha.7 — 2021-08-15
- 1.0.26-alpha.6 — 2021-08-15
- 1.0.26-alpha.5 — 2021-08-15
- 1.0.26-alpha.4 — 2021-08-15
- 1.0.26-alpha.3 — 2021-08-15
- 1.0.25 — 2021-08-12
- 1.0.25-alpha.1 — 2021-08-12
- 1.0.24 — 2021-06-01
- 1.0.24-alpha.1 — 2021-06-01
- … 59 more at https://npm.io/package/@aliretail/react-material-selector/versions
## README
# material-selector
素材选择器
## API
```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import MaterialSelector from '@aliretail/react-material-selector';
class App extends Component {
constructor(props) {
super(props);
this.state = {
visible: true,
};
}
render() {
const props = {
apis: {
// 内容去查询接口
// materialSearchURL:'http://tny.dev.retailcloud.zacz.cn/crm/dubbo/api/material/search',
materialSearchURL: 'https://mall-design-sit.vgktq.cn/mall-portal/material/search',
// 树形结构内容渲染接口
// dirQueryURL : 'http://tny.dev.retailcloud.zacz.cn/crm/dubbo/api/materialDir/query',
dirQueryURL: 'https://mall-design-sit.vgktq.cn/mall-portal/materialDir/query',
// 获取上传oss信息的api的url
// getOssSignature: 'http://tny.dev.retailcloud.zacz.cn/file/dubbo/getOssSignature',
getOssSignature: 'https://mall-design-sit.vgktq.cn/mall-portal/material/sign',
// 上传oss接口
ossUpload: 'https://cz-item.oss-cn-hangzhou.aliyuncs.com/',
// 素材创建
// materialCreate: 'http://tny.dev.retailcloud.zacz.cn/crm/dubbo/api/material/create',
materialCreate: 'https://mall-design-sit.vgktq.cn/mall-portal/material/create',
//前往素材管理的地址(废弃，使用下方的 linkToMaterialCenter)
materialAddress:
'https://tny.epochdev.zacz.cn/ui/retailforce_oms/tab_nav_layout?tab=user_center#/retailforce_crm/member-MediaMaterials',
},
// 是否展示素材选择弹窗，默认为true
showDialog: this.state.visible,
// 是否展示上传按钮
showUpload: true,
// 支持多选
multiSelect: true,
// 支持批量上传
multiUpload: true,
// 修改弹框标题
title: '选择素材',
// 是否显示上传按钮
uploader: true,
// 样式名称
className: 'style1',
// 是否展示所有类型的素材，不传都展示，传了展示对应的tab
showTabs: ['img', 'icon', 'video', 'other'],
//上传
// 限制图片上传格式及提示信息
imgType: ['jpg', 'jpeg', 'jpe', 'bmp', 'gif', 'png'],
imgTypeErrorMessage: '只允许上传.jpg/.jpeg/.jpe/.bmp/.gif/.png格式的图片',
imgUploadSize: 3145728,
imgUploadSizeErrorMessage: '只允许上传小于3M的图片',
//图片上传像素限制
imgUploadWidth: 2976,
imgUploadWidthErrorMessage: '上传不符合尺寸',
imgUploadHeight: 3968,
imgUploadHeightErrorMessage: '上传不符合尺寸',
// 限制icon上传格式及提示信息
iconType: ['svg'],
iconTypeErrorMessage: '只允许上传.svg格式的图片',
// 限制icon上传文件大小
iconUploadSize: 10485760,
iconUploadSizeErrorMessage: '只允许上传小于10M的图标',
//限制视频上传格式及提示信息
videoType: ['mp4'],
videoTypeErrorMessage: '只允许上传.mp4格式的视频',
//视频上传大小限制
videoUploadSize: 31457280,
videoUploadSizeErrorMessage: '只允许上传小于30M的视频',
//视频上传时长限制
videoUploadDuration: 61,
videoUploadDurationErrorMessage: '视频时长不得超过60s',
//选中
//文件选择数量
tabNumbers: 10,
//选中图片像素宽，文件像素高
imgWidth: null,
imgWidthErrorMessage: '选中不符合宽',
imgHeight: '',
imgHeightErrorMessage: '选中不符合高',
//全局选中限制
// selectAllFormat:['svg'],
// selectAllFormatErrorMessage:'只能选.svg格式图片',
// 选中的图片格式限制
imgSelectFormat: ['jpg', 'jpeg', 'jpe', 'bmp', 'gif', 'png'],
imgSelectFormatErrorMessage: '只允许选择.jpg/.jpeg/.jpe/.bmp/.gif/.png格式的图片',
imgSelectSize: 31457280,
imgSelectSizeErrorMessage: '只允许选择小于3m的图片',
// 选中的icon素材格式限制
iconSelectFormat: ['svg'],
iconSelectFormatErrorMessage: '只允许选择.svg格式的图片',
//选中的视频式限制
videoSelectFormat: ['mp4'],
videoSelectFormatErrorMessage: '只能选择格式MP4的视频',
//选择单个视频大小限制及错误信息提示,单位字节
videoSelectSize: 31457280,
videoSelectErrorMessage: '只能选择小于30M的视频',
//选择单个视频时长限制，单位秒
videoSelectDuration: 61,
videoSelectDurationErrorMessage: '时长不得超61s',
// 业务场景 -
bizName: 'crm',
// 业务类型 -
bizType: 'articleMaterial',
// 选择素材后的回调，result见出参
onComplete: (result) => {
console.log('result: ', result);
this.setState({ visible: false });
},
// 取消回调
onCancel: () => {
console.log('cancel');
this.setState({ visible: false });
},
// 关闭回调
onClose: () => {
console.log('close');
this.setState({ visible: false });
},
// 空素材的时候，点击跳转到素材中心的事件
linkToMaterialCenter: () => {
location.href = 'http://www.aliyun.com';
},
// 选择素材后的回调，result保存在这个里面，再次打开会显示已经被选中的素材
value: [],
};
return (
);
}
}
ReactDOM.render(, mountNode);
```
---
_Source: https://npm.io/package/@aliretail/react-material-selector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._