0.1.2 • Published 8 months ago
@moment-design/upload-material v0.1.2
上传素材组件
使用组件
安装依赖
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[]) |
0.1.10
8 months ago
0.1.9
8 months ago
0.1.8
8 months ago
0.1.7
8 months ago
0.1.6
8 months ago
0.1.5
8 months ago
0.1.4
8 months ago
0.1.2
8 months ago
0.1.1
8 months ago
0.1.0
9 months ago
0.0.8
9 months ago
0.0.7
9 months ago
0.0.6
9 months ago
0.0.5
9 months ago
0.0.4
10 months ago
0.0.3
11 months ago
0.0.2
11 months ago
0.0.1
11 months ago