chanyiUniapp/components/uni-file-picker/upload-file.vue

<template>
	<view class="uni-file-picker__files">
		<view v-if="!readonly" class="files-button" @click="choose">
			<slot></slot>
		</view>
		<!-- :class="{'is-text-box':showType === 'list'}" -->
		<view v-if="list.length > 0" class="uni-file-picker__lists is-text-box" :style="borderStyle">
			<!-- ,'is-list-card':showType === 'list-card' -->

			<view class="uni-file-picker__lists-box" v-for="(item ,index) in list" :key="index" :class="{
				'files-border':index !== 0 && styles.dividline}" :style="index !== 0 && styles.dividline &&borderLineStyle">
				<view class="uni-file-picker__item">
					<!-- :class="{'is-text-image':showType === 'list'}" -->
					<!-- 	<view class="files__image is-text-image">
						<image class="header-image" :src="item.logo" mode="aspectFit"></image>
					</view> -->
					<view class="files__name">{{item.name}}</view>
					<view v-if="delIcon&&!readonly" class="icon-del-box icon-files" @click="delFile(index)">
						<view class="icon-del icon-files"></view>
						<view class="icon-del rotate"></view>
					</view>
				</view>
				<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress">
					<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4" :backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
				</view>
				<view v-if="item.status === 'error'" class="file-picker__mask" @click.stop="uploadFiles(item,index)">
					点击重试
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "uploadFile",
		props: {
			filesList: {
				type: Array,
				default () {
					return []
				}
			},
			delIcon: {
				type: Boolean,
				default: true
			},
			limit: {
				type: [Number, String],
				default: 9
			},
			showType: {
				type: String,
				default: ''
			},
			listStyles: {
				type: Object,
				default () {
					return {
						// 是否显示边框
						border: true,
						// 是否显示分隔线
						dividline: true,
						// 线条样式
						borderStyle: {}
					}
				}
			},
			readonly: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			list() {
				let files = []
				this.filesList.forEach(v => {
					files.push(v)
				})
				return files
			},
			styles() {
				let styles = {
					border: true,
					dividline: true,
					'border-style': {}
				}
				return Object.assign(styles, this.listStyles)
			},
			borderStyle() {
				let {
					borderStyle,
					border
				} = this.styles
				let obj = {}
				if (!border) {
					obj.border = 'none'
				} else {
					let width = (borderStyle && borderStyle.width) || 1
					width = this.value2px(width)
					let radius = (borderStyle && borderStyle.radius) || 5
					radius = this.value2px(radius)
					obj = {
						'border-width': width,
						'border-style': (borderStyle && borderStyle.style) || 'solid',
						'border-color': (borderStyle && borderStyle.color) || '#eee',
						'border-radius': radius
					}
				}
				let classles = ''
				for (let i in obj) {
					classles += `${i}:${obj[i]};`
				}
				return classles
			},
			borderLineStyle() {
				let obj = {}
				let {
					borderStyle
				} = this.styles
				if (borderStyle && borderStyle.color) {
					obj['border-color'] = borderStyle.color
				}
				if (borderStyle && borderStyle.width) {
					let width = borderStyle && borderStyle.width || 1
					let style = borderStyle && borderStyle.style || 0
					if (typeof width === 'number') {
						width += 'px'
					} else {
						width = width.indexOf('px') ? width : width + 'px'
					}
					obj['border-width'] = width

					if (typeof style === 'number') {
						style += 'px'
					} else {
						style = style.indexOf('px') ? style : style + 'px'
					}
					obj['border-top-style'] = style
				}
				let classles = ''
				for (let i in obj) {
					classles += `${i}:${obj[i]};`
				}
				return classles
			}
		},

		methods: {
			uploadFiles(item, index) {
				this.$emit("uploadFiles", {
					item,
					index
				})
			},
			choose() {
				this.$emit("choose")
			},
			delFile(index) {
				this.$emit('delFile', index)
			},
			value2px(value) {
				if (typeof value === 'number') {
					value += 'px'
				} else {
					value = value.indexOf('px') !== -1 ? value : value + 'px'
				}
				return value
			}
		}
	}
</script>

<style scoped>
	.uni-file-picker__files {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: flex-start;
	}

	.uni-file-picker__lists {
		position: relative;
		margin-top: 5px;
		overflow: hidden;
	}

	.file-picker__mask {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		left: 0;
		color: #fff;
		font-size: 14px;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.uni-file-picker__lists-box {
		position: relative;
	}

	.uni-file-picker__item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		padding: 8px 10px;
		padding-right: 5px;
		padding-left: 10px;
	}

	.files-border {
		border-top: 1px #eee solid;
	}

	.files__name {
		flex: 1;
		font-size: 14px;
		color: #666;
		margin-right: 25px;
		/* #ifndef APP-NVUE */
		word-break: break-all;
		word-wrap: break-word;
		/* #endif */
	}

	.icon-files {
		/* #ifndef APP-NVUE */
		position: static;
		background-color: initial;
		/* #endif */
	}

	.is-list-card {
		border: 1px #eee solid;
		margin-bottom: 5px;
		border-radius: 5px;
		box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);
		padding: 5px;
	}

	.files__image {
		width: 40px;
		height: 40px;
		margin-right: 10px;
	}

	.header-image {
		width: 100%;
		height: 100%;
	}

	.is-text-box {
		border: 1px #eee solid;
		border-radius: 5px;
	}

	.is-text-image {
		width: 25px;
		height: 25px;
		margin-left: 5px;
	}

	.rotate {
		position: absolute;
		transform: rotate(90deg);
	}

	.icon-del-box {
		/* #ifndef APP-NVUE */
		display: flex;
		margin: auto 0;
		/* #endif */
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0px;
		bottom: 0;
		right: 5px;
		height: 26px;
		width: 26px;
		z-index: 2;
		transform: rotate(-45deg);
	}

	.icon-del {
		width: 15px;
		height: 1px;
		background-color: #333;
	}

	/* #ifdef H5 */
	@media all and (min-width: 768px) {
		.uni-file-picker__files {
			max-width: 375px;
		}
	}

	/* #endif */
</style>