# t-file-manager

FileManager 文件管理

t-file-manager 组件介绍

文件管理选择上传组件，用于便捷上传、管理和分享文件，支持返回文件md5，用于服务端判断重复上传，上传逻辑需要自己实现。

t-file-manager 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-file-manager 基础用法

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mtb-15 r-10"
				title="文件管理器-文件选择"
				sub-title="文件管理选择上传组件是一款用于便捷上传、管理和分享文件支持返回文件md5,用于服务端判断重复上传"></t-card>
		<t-section title="基础使用"
				   class="r-10 mb-15"></t-section>
		<t-file-manager type="primary"
						v-model="fiellist"
						class="r-10 mb-15 p-10"
						@change="fileChange"></t-file-manager>
		<t-section title="插槽自定义布局"
				   class="r-10 mb-15"></t-section>
		<t-file-manager v-model="fiellist1"
						class="r-10 mb-15 p-10"
						@change="fileChange">
			<template #menu>
				<t-button type="success">上传合同</t-button>
			</template>
			<template #default="{files}">
				<t-row class="faic mt-10 ptb-15 fjcb"
					   v-for="(item,index) in files"
					   :key="index">
					<t-icon type='success'
							class="mr-5"
							name="setting"></t-icon>
					<t-text type='success'>{{item['name']}}</t-text>
				</t-row>
			</template>
		</t-file-manager>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const fiellist = ref<UTSJSONObject[]>([
		{
			name: '驾驶证'
		},
		{
			name: '身份证',
		}
	]);

	const fiellist1 = ref<UTSJSONObject[]>([
		{
			name: '合同一',
		},
		{
			name: '合同二',
		}
	]);

	const fileChange = (e : UTSJSONObject[]) => {
		console.log(e);
	}
</script>

t-file-manager Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	"primary"	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
count	Number	9	最大选择数量	-
modelValue	Array	[]	选择的文件列表	-
fileType	String	"all"	选择文件的类型	all, image, video, audio
sizeType	Array	["original", "compressed"]	图片尺寸类型	original, compressed
sourceType	Array	["album", "camera"]	文件来源	album, camera

t-file-manager Events

事件名	说明	回调参数
change	选择文件列表发生变化时触发	文件列表
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

t-file-manager Slots

插槽名	说明
menu	自定义选择按钮插槽
default	自定义文件列表插槽，接收files参数